Input

import { Input } from '@fibrous/semi-ui-solid';

export default function InputDemo() {
    return <Input aria-label="Basic input" defaultValue="hi" />;
}

import { Input } from '@fibrous/semi-ui-solid';

export default function InputDemo() {
    return (
        <>
            <Input placeholder="large" size="large" />
            <br />
            <br />
            <Input placeholder="default" />
            <br />
            <br />
            <Input placeholder="small" size="small" />
        </>
    );
}

import { Input } from '@fibrous/semi-ui-solid';

export default function InputDemo() {
    return (
        <>
            <Input aria-label="可用的输入框" defaultValue="enabled input" />
            <br />
            <br />
            <Input aria-label="禁用的输入框" disabled defaultValue="disabled input" />
        </>
    );
}

import { IconSearch } from '@fibrous/semi-icons-solid';
import { Input, Typography } from '@fibrous/semi-ui-solid';

export default function InputDemo() {
    return (
        <>
            <Input aria-label="Search" prefix={<IconSearch />} showClear />
            <br />
            <br />
            <Input aria-label="Input with text prefix" prefix="Prefix" showClear />
            <br />
            <br />
            <Input aria-label="Search" suffix={<IconSearch />} showClear />
            <br />
            <br />
            <Input
                aria-label="Input with text suffix"
                suffix={
                    <Typography.Text strong type="secondary" style={{ 'margin-right': '8px' }}>
                        Suffix
                    </Typography.Text>
                }
                showClear
            />
        </>
    );
}

import { Input } from '@fibrous/semi-ui-solid';

export default function InputDemo() {
    return <Input aria-label="域名" addonBefore="http://" addonAfter=".com" />;
}

import { Input } from '@fibrous/semi-ui-solid';

export default function InputDemo() {
    return <Input aria-label="Clearable input" showClear defaultValue="click to clear" />;
}

import { Input } from '@fibrous/semi-ui-solid';

export default function InputDemo() {
    return <Input aria-label="Password" mode="password" defaultValue="123456" />;
}

import { Input } from '@fibrous/semi-ui-solid';

export default function InputDemo() {
    return (
        <>
            <Input aria-label="警告状态" defaultValue="ies" validateStatus="warning" />
            <br />
            <br />
            <Input aria-label="错误状态" defaultValue="ies" validateStatus="error" />
            <br />
            <br />
            <Input aria-label="默认状态" defaultValue="ies" />
        </>
    );
}

import { createSignal } from 'solid-js';
import { Input } from '@fibrous/semi-ui-solid';

export default function InputDemo() {
    const [value, setValue] = createSignal('controlInput');

    const onChange = (val: string) => {
        console.log(val);
        setValue(val);
    };

    return (
        <>
            <Input aria-label="Controlled input" value={value()} onChange={onChange} />
        </>
    );
}

import { AutoComplete, DatePicker, Input, InputGroup, InputNumber, Select } from '@fibrous/semi-ui-solid';

export default function InputDemo() {
    return (
        <div>
            <InputGroup>
                <Input placeholder="Name" style={{ width: '100px' }} />
                <InputNumber placeholder="Score" style={{ width: '140px' }} />
            </InputGroup>
            <br />
            <br />
            <br />
            <InputGroup size="small">
                <Select aria-label="Address type" style={{ width: '100px' }} defaultValue="home">
                    <Select.Option value="home">Home</Select.Option>
                    <Select.Option value="work">Work</Select.Option>
                </Select>
                <AutoComplete data={['Beijing Haidian']} placeholder="Address: " style={{ width: '180px' }} />
            </InputGroup>
            <br />
            <br />
            <br />
            <InputGroup size="small">
                <Select aria-label="Account action" style={{ width: '100px' }} defaultValue="signup">
                    <Select.Option value="signup">Sign Up</Select.Option>
                    <Select.Option value="signin">Sign In</Select.Option>
                </Select>
                <Input placeholder="Email" style={{ width: '180px' }} />
            </InputGroup>
            <br />
            <br />
            <br />
            <InputGroup size="small">
                <Input placeholder="Name" style={{ width: '100px' }} />
                <DatePicker placeholder="Birthday" />
            </InputGroup>
        </div>
    );
}

import { Cascader, InputGroup, Select, TreeSelect } from '@fibrous/semi-ui-solid';

const treeData = [
    {
        label: 'Asia',
        value: 'Asia',
        key: '0',
        children: [
            {
                label: 'China',
                value: 'China',
                key: '0-0',
                children: [
                    { label: 'Beijing', value: 'Beijing', key: '0-0-0' },
                    { label: 'Shanghai', value: 'Shanghai', key: '0-0-1' },
                ],
            },
        ],
    },
    { label: 'North America', value: 'North America', key: '1' },
];

export default function InputDemo() {
    return (
        <>
            <InputGroup>
                <Select aria-label="From or to" style={{ width: '100px' }} defaultValue="from">
                    <Select.Option value="from">From: </Select.Option>
                    <Select.Option value="to">To: </Select.Option>
                </Select>
                <TreeSelect style={{ width: '220px' }} treeData={treeData} placeholder="Please select" />
            </InputGroup>
            <br />
            <br />
            <InputGroup>
                <Select aria-label="From or to" style={{ width: '100px' }} defaultValue="from">
                    <Select.Option value="from">From: </Select.Option>
                    <Select.Option value="to">To: </Select.Option>
                </Select>
                <Cascader style={{ width: '220px' }} treeData={treeData} placeholder="Please select" />
            </InputGroup>
        </>
    );
}

import { TextArea } from '@fibrous/semi-ui-solid';

export default function InputDemo() {
    return (
        <div>
            <TextArea aria-label="Text area" />
            <br />
            <br />
            <TextArea aria-label="Text area with character limit" maxCount={100} showClear />
        </div>
    );
}

import { TextArea } from '@fibrous/semi-ui-solid';

export default function InputDemo() {
    return (
        <div>
            <TextArea textareaStyle={{ height: '120px' }} placeholder="高度 120px" />
            <br />
            <br />
            <TextArea textareaStyle={{ height: '200px', 'background-color': '#f9f9f9' }} placeholder="高度 200px，灰色背景" />
            <br />
            <br />
            <TextArea style={{ border: '2px solid var(--semi-color-primary)' }} textareaStyle={{ height: '150px' }} placeholder="style 控制外层容器，textareaStyle 控制 textarea" />
        </div>
    );
}

import { TextArea } from '@fibrous/semi-ui-solid';

export default function InputDemo() {
    return <TextArea aria-label="带行号的文本" showLineNumber lineNumberStart={1} defaultValue={'Line 1\nLine 2\n这是一行较长的文本，用来演示软换行时的行号对齐效果。\nLine 4\nLine 5'} rows={12} style={{ width: '420px' }} lineNumberStyle={{ color: 'var(--semi-color-text-2)' }} />;
}

import { createSignal } from 'solid-js';
import { HotKeys, TextArea } from '@fibrous/semi-ui-solid';

export default function InputDemo() {
    const [text, setText] = createSignal('');

    const handleKeyDown = (event: KeyboardEvent) => {
        if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault();
        }
    };

    return (
        <>
            <div id="input-shift-enter-hint" style={{ display: 'flex' }}>
                使用
                <HotKeys hotKeys={['shift', 'enter']} style={{ 'margin-bottom': '12px', 'margin-left': '4px', 'margin-right': '4px' }} />
                换行的 TextArea
            </div>
            <TextArea aria-labelledby="input-shift-enter-hint" value={text()} onChange={(value) => setText(value)} onKeyDown={handleKeyDown} />
        </>
    );
}

import { TextArea } from '@fibrous/semi-ui-solid';

export default function InputDemo() {
    return (
        <div>
            <TextArea aria-label="单行自适应高度" autosize rows={1} />
            <br />
            <br />
            <TextArea aria-label="限制行数的自适应高度" autosize={{ minRows: 1, maxRows: 3 }} />
            <br />
            <br />
            <TextArea aria-label="限制字数的自适应高度" autosize maxCount={100} />
        </div>
    );
}

import { createSignal, Show } from 'solid-js';
import { Button, Form, FormInput, Input, TextArea, Typography } from '@fibrous/semi-ui-solid';

// Counts grapheme clusters, so an emoji sequence counts as one character
function getValueLength(str: string) {
    return [...new Intl.Segmenter().segment(str)].length;
}

function getTextAreaStrLength(str: string) {
    return str.replace(/\s/g, '').length;
}

export default function InputDemo() {
    const [value, setValue] = createSignal('');

    return (
        <div>
            <h4 id="input-value-length-max-length">maxLength=10</h4>
            <div>
                <Typography.Text>尝试输入以下字符</Typography.Text>
                <div>
                    <Typography.Text copyable>💖</Typography.Text>
                </div>
                <div>
                    <Typography.Text copyable>👨‍👩‍👧‍👦</Typography.Text>
                </div>
            </div>
            <Input aria-labelledby="input-value-length-max-length" maxLength={10} getValueLength={getValueLength} onChange={(next) => setValue(next)} style={{ width: '200px', 'margin-top': '12px', 'margin-bottom': '12px' }} />
            <Show when={value()}>
                <div>
                    <div>
                        <Typography.Text type="tertiary">{`getValueLength=${getValueLength(value())}`}</Typography.Text>
                    </div>
                    <div>
                        <Typography.Text type="tertiary">{`length=${value().length}`}</Typography.Text>
                    </div>
                </div>
            </Show>
            <br />
            <br />
            <h4 id="input-value-length-min-length">Form.Input + minLength=4</h4>
            <Form layout="horizontal">
                <FormInput noLabel aria-labelledby="input-value-length-min-length" field="username" minLength={4} getValueLength={getValueLength} style={{ width: '200px' }} />
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
            </Form>
            <h4 id="input-value-length-max-count">maxCount=10</h4>
            <TextArea aria-labelledby="input-value-length-max-count" defaultValue="semi design" rows={2} maxCount={10} getValueLength={getTextAreaStrLength} style={{ width: '200px' }} />
        </div>
    );
}

import { createSignal } from 'solid-js';
import { Input, TextArea } from '@fibrous/semi-ui-solid';

const style = { width: '300px' };
const counterStyle = { 'margin-top': '8px', color: 'var(--semi-color-text-2)', 'font-size': '12px' };

export default function InputDemo() {
    const [inputValue, setInputValue] = createSignal('');
    const [textAreaValue, setTextAreaValue] = createSignal('');
    const [inputCount, setInputCount] = createSignal(0);
    const [textAreaCount, setTextAreaCount] = createSignal(0);

    const handleInputChange = (value: string) => {
        setInputValue(value);
        setInputCount((count) => count + 1);
    };

    const handleTextAreaChange = (value: string) => {
        setTextAreaValue(value);
        setTextAreaCount((count) => count + 1);
    };

    return (
        <div>
            <h4>Input with composition</h4>
            <Input composition value={inputValue()} onChange={handleInputChange} placeholder="开启 composition，拼音输入时不会触发 onChange" style={style} />
            <div style={counterStyle}>onChange 触发次数: {inputCount()}</div>
            <br />
            <br />
            <h4>TextArea with composition</h4>
            <TextArea composition value={textAreaValue()} onChange={handleTextAreaChange} placeholder="开启 composition，拼音输入时不会触发 onChange" style={style} />
            <div style={counterStyle}>onChange 触发次数: {textAreaCount()}</div>
        </div>
    );
}