LocaleProvider

import en_GB from '@fibrous/semi-foundation/locale/source/en_GB';
import ja_JP from '@fibrous/semi-foundation/locale/source/ja_JP';
import { LocaleProvider, Pagination } from '@fibrous/semi-ui-solid';

export default function LocaleDemo() {
    return (
        <>
            <LocaleProvider locale={en_GB}>
                <Pagination total={100} showTotal showSizeChanger style={{ margin: '20px' }} />
            </LocaleProvider>
            <LocaleProvider locale={ja_JP}>
                <Pagination total={100} showTotal showSizeChanger style={{ margin: '20px' }} />
            </LocaleProvider>
        </>
    );
}

import en_GB from '@fibrous/semi-foundation/locale/source/en_GB';
import ko_KR from '@fibrous/semi-foundation/locale/source/ko_KR';
import zh_CN from '@fibrous/semi-foundation/locale/source/zh_CN';
import { LocaleProvider, LocaleConsumer } from '@fibrous/semi-ui-solid';

// Custom component text joins the Locale type through declaration merging
declare module '@fibrous/semi-foundation/locale/interface' {
    interface Locale {
        ComponentA: { customKey: string };
    }
}

function GetLocaleFromSemi() {
    return (
        <LocaleConsumer componentName="TimePicker">
            {(localeData, localeCode) => (
                <div>
                    {localeCode} : {localeData.begin}
                </div>
            )}
        </LocaleConsumer>
    );
}

function ExtractComponent() {
    return <LocaleConsumer componentName="ComponentA">{(localeData) => <div>{localeData.customKey}</div>}</LocaleConsumer>;
}

export default function LocaleDemo() {
    const zhWithCustom = { ...zh_CN, ComponentA: { customKey: 'semi' } };
    const koWithCustom = { ...ko_KR, ComponentA: { customKey: 'design' } };
    const enWithCustom = { ...en_GB, ComponentA: { customKey: 'dsm' } };

    return (
        <>
            <LocaleProvider locale={zhWithCustom}>
                <GetLocaleFromSemi />
            </LocaleProvider>
            <LocaleProvider locale={koWithCustom}>
                <GetLocaleFromSemi />
            </LocaleProvider>
            <LocaleProvider locale={enWithCustom}>
                <GetLocaleFromSemi />
            </LocaleProvider>
            <LocaleProvider locale={zhWithCustom}>
                <ExtractComponent />
            </LocaleProvider>
            <LocaleProvider locale={koWithCustom}>
                <ExtractComponent />
            </LocaleProvider>
            <LocaleProvider locale={enWithCustom}>
                <ExtractComponent />
            </LocaleProvider>
        </>
    );
}

import { createSignal, For } from 'solid-js';
import type { Locale } from '@fibrous/semi-foundation/locale/interface';
import zh_CN from '@fibrous/semi-foundation/locale/source/zh_CN';
import { IconUser, IconSemiLogo, IconStar } from '@fibrous/semi-icons-solid';
import { LocaleProvider, ConfigProvider, Pagination, Modal, Button, Select, Cascader, DatePicker, TreeSelect, Table, TimePicker, List, Calendar, Typography, Transfer, ImagePreview, Image, Form, FormInput, Nav, type ColumnProps } from '@fibrous/semi-ui-solid';

// A pack loads when it is picked, so the page does not bundle every language up front
const loaders = {
    ar: () => import('@fibrous/semi-foundation/locale/source/ar'),
    az: () => import('@fibrous/semi-foundation/locale/source/az'),
    bg: () => import('@fibrous/semi-foundation/locale/source/bg'),
    bn_IN: () => import('@fibrous/semi-foundation/locale/source/bn_IN'),
    ca: () => import('@fibrous/semi-foundation/locale/source/ca'),
    ceb_PH: () => import('@fibrous/semi-foundation/locale/source/ceb_PH'),
    cs_CZ: () => import('@fibrous/semi-foundation/locale/source/cs_CZ'),
    da: () => import('@fibrous/semi-foundation/locale/source/da'),
    de: () => import('@fibrous/semi-foundation/locale/source/de'),
    el_GR: () => import('@fibrous/semi-foundation/locale/source/el_GR'),
    en_GB: () => import('@fibrous/semi-foundation/locale/source/en_GB'),
    en_US: () => import('@fibrous/semi-foundation/locale/source/en_US'),
    es: () => import('@fibrous/semi-foundation/locale/source/es'),
    es_419: () => import('@fibrous/semi-foundation/locale/source/es_419'),
    et: () => import('@fibrous/semi-foundation/locale/source/et'),
    fa_IR: () => import('@fibrous/semi-foundation/locale/source/fa_IR'),
    fi_FI: () => import('@fibrous/semi-foundation/locale/source/fi_FI'),
    fil_PH: () => import('@fibrous/semi-foundation/locale/source/fil_PH'),
    fr: () => import('@fibrous/semi-foundation/locale/source/fr'),
    fr_CA: () => import('@fibrous/semi-foundation/locale/source/fr_CA'),
    ga: () => import('@fibrous/semi-foundation/locale/source/ga'),
    he_IL: () => import('@fibrous/semi-foundation/locale/source/he_IL'),
    hi_IN: () => import('@fibrous/semi-foundation/locale/source/hi_IN'),
    hr: () => import('@fibrous/semi-foundation/locale/source/hr'),
    hu_HU: () => import('@fibrous/semi-foundation/locale/source/hu_HU'),
    id_ID: () => import('@fibrous/semi-foundation/locale/source/id_ID'),
    is: () => import('@fibrous/semi-foundation/locale/source/is'),
    it: () => import('@fibrous/semi-foundation/locale/source/it'),
    ja_JP: () => import('@fibrous/semi-foundation/locale/source/ja_JP'),
    jv_ID: () => import('@fibrous/semi-foundation/locale/source/jv_ID'),
    kk: () => import('@fibrous/semi-foundation/locale/source/kk'),
    km_KH: () => import('@fibrous/semi-foundation/locale/source/km_KH'),
    ko_KR: () => import('@fibrous/semi-foundation/locale/source/ko_KR'),
    lt: () => import('@fibrous/semi-foundation/locale/source/lt'),
    lv: () => import('@fibrous/semi-foundation/locale/source/lv'),
    ms_MY: () => import('@fibrous/semi-foundation/locale/source/ms_MY'),
    my_MM: () => import('@fibrous/semi-foundation/locale/source/my_MM'),
    nb: () => import('@fibrous/semi-foundation/locale/source/nb'),
    nl_NL: () => import('@fibrous/semi-foundation/locale/source/nl_NL'),
    pl_PL: () => import('@fibrous/semi-foundation/locale/source/pl_PL'),
    pt: () => import('@fibrous/semi-foundation/locale/source/pt'),
    pt_BR: () => import('@fibrous/semi-foundation/locale/source/pt_BR'),
    ro: () => import('@fibrous/semi-foundation/locale/source/ro'),
    ru_RU: () => import('@fibrous/semi-foundation/locale/source/ru_RU'),
    sk: () => import('@fibrous/semi-foundation/locale/source/sk'),
    sl: () => import('@fibrous/semi-foundation/locale/source/sl'),
    sq: () => import('@fibrous/semi-foundation/locale/source/sq'),
    sv_SE: () => import('@fibrous/semi-foundation/locale/source/sv_SE'),
    sw: () => import('@fibrous/semi-foundation/locale/source/sw'),
    th_TH: () => import('@fibrous/semi-foundation/locale/source/th_TH'),
    tr_TR: () => import('@fibrous/semi-foundation/locale/source/tr_TR'),
    uk_UA: () => import('@fibrous/semi-foundation/locale/source/uk_UA'),
    ur: () => import('@fibrous/semi-foundation/locale/source/ur'),
    uz: () => import('@fibrous/semi-foundation/locale/source/uz'),
    vi_VN: () => import('@fibrous/semi-foundation/locale/source/vi_VN'),
    zh_TW: () => import('@fibrous/semi-foundation/locale/source/zh_TW'),
};
type LocaleCode = 'zh_CN' | keyof typeof loaders;

interface Current {
    code: LocaleCode;
    locale: Locale;
}

interface Person {
    key: string;
    name: string;
    age: number;
    address: string;
}

const treeData = [
    {
        label: 'Asia',
        value: 'asia',
        key: '1',
        children: [
            {
                label: 'China',
                value: 'china',
                key: '1-0',
                children: [
                    { label: 'Beijing', value: 'beijing', key: '1-0-0' },
                    { label: 'Shanghai', value: 'shanghai', key: '1-0-1' },
                ],
            },
            {
                label: 'Japan',
                value: 'japan',
                key: '1-1',
                children: [{ label: 'Osaka', value: 'osaka', key: '1-1-0' }],
            },
        ],
    },
];

const columns: ColumnProps<Person>[] = [
    {
        title: 'Name',
        width: 250,
        dataIndex: 'name',
    },
    {
        title: 'Age',
        width: 150,
        dataIndex: 'age',
    },
    {
        title: 'Address',
        dataIndex: 'address',
    },
];

const tableData: Person[] = Array.from({ length: 46 }, (_, i) => ({
    key: '' + i,
    name: `Bytedance ${i}`,
    age: 32,
    address: `Beijing, Haidian. Zhichun Road ${i}`,
}));

const transferData = Array.from({ length: 100 }, (_, i) => ({
    label: `选项名称 ${i}`,
    value: i,
    disabled: false,
    key: i,
}));

const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg', '/assets/root-web-sites/colorful.jpg'];

const style = { margin: '10px' };

function I18nComponent() {
    const [modalVisible, setModalVisible] = createSignal(false);
    const navItems = [
        { itemKey: 'user', text: '用户管理' },
        { itemKey: 'union', text: '活动管理' },
    ];
    const navHeader = {
        logo: () => <IconSemiLogo style={{ height: '36px', 'font-size': '36px' }} />,
        text: 'Semi 数据后台',
    };

    return (
        <>
            <h5>Pagination</h5>
            <Pagination total={100} showTotal showSizeChanger style={style} showQuickJumper />
            <h5>Modal</h5>

            <div style={style}>
                <Button onClick={() => setModalVisible(true)}>Show Modal</Button>
                <Modal title="Modal" visible={modalVisible()} onOk={() => setModalVisible(false)} onCancel={() => setModalVisible(false)}>
                    <p>This is the content of a basic modal.</p>
                    <p>More content...</p>
                </Modal>
            </div>
            <h5>Select & Cascader</h5>
            <div style={style}>
                <Select aria-label="Select" filter style={{ width: '180px' }}>
                    <Select.Option value="abc">abc</Select.Option>
                    <Select.Option value="vigo" disabled>
                        vigo
                    </Select.Option>
                    <Select.Option value="hotsoon">hotsoon</Select.Option>
                </Select>
                <Cascader style={{ width: '300px', margin: '10px' }} treeData={treeData} filterTreeNode prefix="Cascader" />
            </div>
            <h5>DatePicker</h5>
            <DatePicker style={{ ...style, width: '250px' }} />
            <DatePicker style={{ ...style, width: '300px' }} type="dateTime" />
            <DatePicker style={{ ...style, width: '300px' }} type="dateRange" />
            <DatePicker style={{ ...style, width: '450px' }} type="dateTimeRange" />
            <h5>TimePicker</h5>
            <TimePicker style={style} />
            <TimePicker use12Hours style={style} />
            <br />
            <br />
            <h5>TreeSelect</h5>
            <TreeSelect style={{ ...style, width: '300px' }} dropdownStyle={{ 'max-height': '400px', overflow: 'auto' }} treeData={treeData} filterTreeNode />
            <h5>Table</h5>
            <Table columns={columns} dataSource={tableData} scroll={{ y: 320 }} />
            <h5>Table - Empty</h5>
            <Table columns={columns} dataSource={[]} scroll={{ y: 320 }} />
            <h5>List - Empty</h5>
            <List header={<div>List</div>} dataSource={[]} />
            <h5>Calendar</h5>
            <Calendar mode="month" displayValue={new Date(2024, 4, 6, 12)} />
            <h5>Typography - Copyable</h5>
            <Typography.Paragraph copyable>Click to copy text.</Typography.Paragraph>
            <h5>Typography - Collapsible</h5>
            <Typography.Paragraph ellipsis={{ rows: 3, expandable: true, collapsible: true }} style={{ width: '300px' }}>
                支持展开和折叠：Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
            </Typography.Paragraph>
            <h5>Transfer</h5>
            <Transfer style={{ width: '568px', height: '416px' }} dataSource={transferData} />
            <h5>Image</h5>
            <ImagePreview showTooltip>
                <For each={srcList}>{(src, index) => <Image src={src} width={200} alt={`lamp${index() + 1}`} style={{ 'margin-right': '5px' }} />}</For>
            </ImagePreview>
            <h5>Form</h5>
            <Form layout="horizontal" onValueChange={(values) => console.log(values)}>
                <FormInput field="UserName" label={{ text: '角色', optional: true }} style={{ width: '200px' }} />
            </Form>
            <h5>Navigation</h5>
            <Nav bodyStyle={{ height: '320px' }} items={navItems} renderItemIcon={({ item }) => (item.itemKey === 'user' ? <IconUser /> : <IconStar />)} header={navHeader} footer={{ collapseButton: true }} />
        </>
    );
}

export default function LocaleDemo() {
    const [current, setCurrent] = createSignal<Current>({ code: 'zh_CN', locale: zh_CN });
    let latest: LocaleCode = 'zh_CN';

    const onLanguageChange = async (code: LocaleCode) => {
        latest = code;
        const locale = code === 'zh_CN' ? zh_CN : (await loaders[code]()).default;
        // A pick made while this pack was loading wins
        if (latest === code) {
            setCurrent({ code, locale });
        }
    };

    return (
        <>
            <div style={{ 'border-bottom': '1px solid var(--semi-color-border)', 'padding-bottom': '20px' }}>
                <Select aria-label="切换语言" onChange={(value) => onLanguageChange(value as LocaleCode)} prefix="切换语言" style={{ width: '250px' }} defaultValue="zh_CN">
                    <Select.Option value="zh_CN">简体中文</Select.Option>
                    <Select.Option value="en_US">英语（美）</Select.Option>
                    <Select.Option value="en_GB">英语（英）</Select.Option>
                    <Select.Option value="ja_JP">日语</Select.Option>
                    <Select.Option value="ko_KR">韩语</Select.Option>
                    <Select.Option value="ar">阿拉伯语</Select.Option>
                    <Select.Option value="vi_VN">越南语</Select.Option>
                    <Select.Option value="ru_RU">俄罗斯语</Select.Option>
                    <Select.Option value="id_ID">印尼语</Select.Option>
                    <Select.Option value="ms_MY">马来语</Select.Option>
                    <Select.Option value="th_TH">泰语</Select.Option>
                    <Select.Option value="tr_TR">土耳其语</Select.Option>
                    <Select.Option value="pt_BR">葡萄牙语（巴西）</Select.Option>
                    <Select.Option value="zh_TW">繁体中文</Select.Option>
                    <Select.Option value="es">西班牙语</Select.Option>
                    <Select.Option value="de">德语</Select.Option>
                    <Select.Option value="it">意大利语</Select.Option>
                    <Select.Option value="fr">法语</Select.Option>
                    <Select.Option value="ro">罗马尼亚语</Select.Option>
                    <Select.Option value="sv_SE">瑞典语</Select.Option>
                    <Select.Option value="pl_PL">波兰语</Select.Option>
                    <Select.Option value="nl_NL">荷兰语</Select.Option>
                    <Select.Option value="az">阿塞拜疆语</Select.Option>
                    <Select.Option value="bn_IN">孟加拉语</Select.Option>
                    <Select.Option value="bg">保加利亚语</Select.Option>
                    <Select.Option value="ca">加泰罗尼亚语</Select.Option>
                    <Select.Option value="cs_CZ">捷克语</Select.Option>
                    <Select.Option value="ceb_PH">宿务语</Select.Option>
                    <Select.Option value="da">丹麦语</Select.Option>
                    <Select.Option value="el_GR">希腊语</Select.Option>
                    <Select.Option value="es_419">西班牙语（拉美）</Select.Option>
                    <Select.Option value="et">爱沙尼亚语</Select.Option>
                    <Select.Option value="fa_IR">波斯语</Select.Option>
                    <Select.Option value="fil_PH">菲律宾语</Select.Option>
                    <Select.Option value="fi_FI">芬兰语</Select.Option>
                    <Select.Option value="fr_CA">法语（加）</Select.Option>
                    <Select.Option value="ga">爱尔兰语</Select.Option>
                    <Select.Option value="he_IL">希伯来语</Select.Option>
                    <Select.Option value="hi_IN">印地语</Select.Option>
                    <Select.Option value="hr">克罗地亚语</Select.Option>
                    <Select.Option value="hu_HU">匈牙利语</Select.Option>
                    <Select.Option value="is">冰岛语</Select.Option>
                    <Select.Option value="jv_ID">爪哇语</Select.Option>
                    <Select.Option value="kk">哈萨克语</Select.Option>
                    <Select.Option value="km_KH">高棉语</Select.Option>
                    <Select.Option value="lt">立陶宛语</Select.Option>
                    <Select.Option value="lv">拉脱维亚语</Select.Option>
                    <Select.Option value="my_MM">缅甸语</Select.Option>
                    <Select.Option value="nb">挪威语</Select.Option>
                    <Select.Option value="pt">葡萄牙语</Select.Option>
                    <Select.Option value="sk">斯洛伐克语</Select.Option>
                    <Select.Option value="sl">斯洛文尼亚语</Select.Option>
                    <Select.Option value="sq">阿尔巴尼亚语</Select.Option>
                    <Select.Option value="sw">斯瓦希里语</Select.Option>
                    <Select.Option value="uk_UA">乌克兰语</Select.Option>
                    <Select.Option value="ur">乌尔都语</Select.Option>
                    <Select.Option value="uz">乌兹别克语</Select.Option>
                </Select>
            </div>
            <LocaleProvider locale={current().locale}>
                <ConfigProvider direction={current().code === 'ar' ? 'rtl' : 'ltr'} locale={current().locale}>
                    {/* Keyed by the Current object so each language switch remounts the demo, as the React version does with key */}
                    <For each={[current()]}>{() => <I18nComponent />}</For>
                </ConfigProvider>
            </LocaleProvider>
        </>
    );
}