@cloudbase/weda-ui 0.2.9 → 0.2.10

package/src/web/wedatheme/src/routes/wedatheme-index/Component.jsx

@@ -0,0 +1,402 @@
+import React, { useState } from 'react';
+import {
+  Card,
+  Form,
+  Layout,
+  Button,
+  RegionSelect,
+  RegionPanel,
+  RegionOption,
+  Cascader,
+  DatePicker,
+  List,
+  Dropdown,
+  SelectMultiple,
+  Tooltip,
+  Tag,
+  Text,
+  Upload,
+  Icon,
+  Justify,
+} from '@tencent/tea-component';
+
+// const { RangePicker } = DatePicker;
+// const [SelectAp, setSelectAp] = useState('default');
+const data = [
+  {
+    label: '北京市',
+    value: 'bj',
+    children: [
+      { label: '朝阳区', value: 'cy' },
+      { label: '海淀区', value: 'hd' },
+    ],
+  },
+  {
+    label: '上海市',
+    value: 'sh',
+    children: [
+      { label: '徐汇区', value: 'xh' },
+      { label: '黄埔区', value: 'hp' },
+    ],
+  },
+  {
+    label: '广东省',
+    value: 'gd',
+    children: [
+      {
+        label: '深圳市',
+        value: 'sz',
+        children: [
+          { label: '南山区', value: 'ns' },
+          { label: '宝安区', value: 'ba' },
+          { label: '福田区', value: 'ft', disabled: true },
+        ],
+      },
+    ],
+  },
+];
+// const menu = close => (
+//     <List type="option">
+//       <List.Item onClick={() => setSelectAp('default')}>默认</List.Item>
+//       <List.Item onClick={() => setSelectAp('button')}>按钮</List.Item>
+//       <List.Item onClick={() => setSelectAp('link')}>链接</List.Item>
+//       <List.Item onClick={() => setSelectAp('filter')}>筛选</List.Item>
+//       <List.Item onClick={() => setSelectAp('pre')}>无</List.Item>
+//       <List.SubMenu label="更多">
+//         <List type="option">
+//           <List.Item disabled>订阅</List.Item>
+//           <List.Item onClick={close}>朋友代付</List.Item>
+//         </List>
+//       </List.SubMenu>
+//     </List>
+// );
+// const [fileList, setFileList] = useState([]);
+// const [uploading, setUploading] = useState(null);
+// const [image, setImage] = useState(null);
+
+
+// function handleStart(file) {
+//   getBase64(file);
+
+//   setUploading(true);
+// }
+// const fnGetUrl = (file) => {
+//   const reader = new FileReader();
+//   let a ;
+//   reader.onloadend = () => {
+//     console.log('reader.result;', reader.result);
+//     a = reader.result;
+//   };
+//   console.log('aaaa', a);
+//   reader.readAsDataURL(file);
+//   return a;
+// };
+
+// function handleSuccess(result, { file }) {
+//   setFileList(fileList => [
+//     ...fileList,
+//     { name: file.name, status: 'success', url: 'https://via.placeholder.com/100' },
+//   ]);
+//   setUploading(false);
+//   console.log('result', result);
+//   console.log('FileList', FileList);
+// }
+
+// function handleError(error, { file }) {
+//   setFileList(fileList => [
+//     ...fileList,
+//     { name: file.name, status: 'danger', url: 'https://via.placeholder.com/50' },
+//   ]);
+//   setUploading(false);
+//   console.error('error', error);
+// }
+// function getBase64(file) {
+//   const reader = new FileReader();
+//   reader.onloadend = () => {
+//     setImage(reader.result);
+//   };
+//   reader.readAsDataURL(file);
+// }
+// 输入框
+export function WedaInput(props) {
+  const { label = '输入' } = props;
+
+  return (
+    <div className="weda-ui weda-input">
+      <div className="weda-formcells weui-cells weui-cells_forms weui-flex">
+        <div className="weda-formcells__label weui-cell">
+          <label>{label}</label>
+        </div>
+        <div className="weda-formcells__content weui-flex__item">
+          <div className="weui-cell weui-cell_active weui-cell_form">
+            <div className="weui-cell__bd weui-flex">
+              <input
+                className="weui-input"
+                type="text"
+                placeholder="请输入"
+                name="formInput"
+                value=""
+              />
+              <button className="weui-btn_reset weui-btn_icon weui-btn_input-clear">
+                <i className="weui-icon-clear"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// 多选
+export function WedaTextArea() {
+  return (
+    <div className="weda-ui weda-textarea">
+      <div className="weda-formcells weui-cells weui-cells_forms weui-flex">
+        <div className="weda-formcells__label weui-cell">
+          <label>标题</label>
+        </div>
+        <div className="weda-formcells__content weui-flex__item">
+          <div className="weui-cell weui-cell_active weui-cell_form">
+            <div className="weui-cell__bd">
+              <textarea
+                className="weui-textarea fn-weda-textarea"
+                placeholder="请输入"
+                maxLength="140"
+              ></textarea>
+              <div className="weui-textarea-counter">
+                <span>0</span>/140
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+// Radio
+export function WedaRadio() {
+  return (
+    <div className="weda-radio weda-ui">
+      <div className="weda-formcells weui-cells weui-cells_checkbox weui-flex">
+        <div className="weda-formcells__label weui-cell">
+          <label>单选框</label>
+        </div>
+        <div className="weda-formcells__content weui-flex__item">
+          <label
+            className="weui-cell weui-cell_active weui-check__label"
+            htmlFor="radio-6-0"
+          >
+            <div className="weui-cell__hd">
+              <input
+                type="radio"
+                className="weui-check"
+                name="radio-6-formRadio"
+                id="radio-6-0"
+                value="first"
+              />
+              <i className="weui-icon-checked"></i>
+            </div>
+            <div className="weui-cell__bd">
+              <p>选项一</p>
+            </div>
+          </label>
+          <label
+            className="weui-cell weui-cell_active weui-check__label"
+            htmlFor="radio-6-1"
+          >
+            <div className="weui-cell__hd">
+              <input
+                type="radio"
+                className="weui-check"
+                name="radio-6-formRadio"
+                id="radio-6-1"
+                value="second"
+                checked=""
+              />
+              <i className="weui-icon-checked"></i>
+            </div>
+            <div className="weui-cell__bd">
+              <p>选项二</p>
+            </div>
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// 复选
+export function WedaCheckbox() {
+  return (
+    <div className="weda-ui weda-checkbox">
+      <div className="weda-formcells weui-cells weui-cells_checkbox weui-flex">
+        <div className="weda-formcells__label weui-cell">
+          <label>复选框</label>
+        </div>
+        <div className="weda-formcells__content weui-flex__item">
+          <label
+            className="weui-cell weui-cell_active weui-check__label"
+            htmlFor="checkbox-32-0"
+          >
+            <div className="weui-cell__hd">
+              <input
+                type="checkbox"
+                className="weui-check"
+                name="checkbox-32-formCheckbox"
+                id="checkbox-32-0"
+                value="first"
+              />
+              <i className="weui-icon-checked"></i>
+            </div>
+            <div className="weui-cell__bd">
+              <p>选项一</p>
+            </div>
+          </label>
+          <label
+            className="weui-cell weui-cell_active weui-check__label"
+            htmlFor="checkbox-32-1"
+          >
+            <div className="weui-cell__hd">
+              <input
+                type="checkbox"
+                className="weui-check"
+                name="checkbox-32-formCheckbox"
+                id="checkbox-32-1"
+                value="second"
+              />
+              <i className="weui-icon-checked"></i>
+            </div>
+            <div className="weui-cell__bd">
+              <p>选项二</p>
+            </div>
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// 选则，包括时间/邮箱/等
+export function WedaSelect(props) {
+  const { label = '选择' } = props;
+  return (
+    <div className="weda-ui weda-select">
+      <div className="weda-formcells weui-cells weui-cells_forms weui-flex">
+        <div className="weda-formcells__label weui-cell">
+          <label>{label}</label>
+        </div>
+        <div className="weda-formcells__content weui-flex__item">
+          <div className="weui-cell weui-cell_active weui-cell_form weui-flex__item">
+            <div className="weui-cell__bd weui-flex">
+              <input
+                className="weui-input"
+                type="select"
+                name="formSelect"
+                placeholder="请选择"
+                autoComplete="off"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// 开关
+export function WedaSwitch() {
+  return (
+    <div className="weda-ui weda-switch">
+      <div className="weda-formcells weui-cells weui-cells_checkbox weui-flex">
+        <div className="weda-formcells__label weui-cell">
+          <label>开关</label>
+        </div>
+        <div className="weda-formcells__content weui-flex__item">
+          <div className="weui-cell weui-cell_active weui-cell_switch weui-flex__item">
+            <div className="weui-cell__bd"></div>
+            <div className="weui-cell__ft">
+              <label htmlFor="switch-id2" className="weui-switch-cp">
+                <input
+                  id="switch-id2"
+                  className="weui-switch-cp__input"
+                  type="checkbox"
+                />
+                <div className="weui-switch-cp__box"></div>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// 地域选择器
+export function WedaRegionSelect() {
+  const { Head, Column, Group } = RegionPanel;
+
+  const [region, setRegion] = useState('gz');
+
+  return (
+    <div className="weda-select weui-cells weui-cells_form weui-flex">
+      <div className="weui-cell">地区</div>
+      <div className="weui-cell weui-cell_active weui-cell_form weui-flex__item">
+
+        <RegionSelect
+          className="fn-weda-dropdown--region-select"
+          boxclassName="fn-weda-region"
+          value={region}
+          onChange={value => setRegion(value)}
+          moreInfo="其它地域 20"
+          shortcut={{
+            title: '最近访问',
+            options: ['gz', 'sh', 'bj'],
+          }}
+        >
+          <RegionPanel>
+            <Head>全部地域</Head>
+            <Column>
+              <Group name="中国">
+                <RegionOption value="gz" num={20}>
+                  广州
+                </RegionOption>
+                <RegionOption value="sh" num={20} dot>
+                  上海
+                </RegionOption>
+                <RegionOption value="hk">香港</RegionOption>
+              </Group>
+              <Group name="游戏专区">
+                <RegionOption value="bj">北京</RegionOption>
+              </Group>
+            </Column>
+            <Column>
+              <Group name="亚洲">
+                <RegionOption value="ia" num={20}>
+                  印度
+                </RegionOption>
+                <RegionOption value="ko">韩国</RegionOption>
+                <RegionOption value="ta">泰国</RegionOption>
+                <RegionOption value="sg">新加坡</RegionOption>
+                <RegionOption value="jp">日本</RegionOption>
+              </Group>
+            </Column>
+            <Column>
+              <Group name="北美洲">
+                <RegionOption value="gg">硅谷</RegionOption>
+                <RegionOption value="dld">多伦多</RegionOption>
+              </Group>
+            </Column>
+            <Column>
+              <Group name="欧洲">
+                <RegionOption value="fl">法兰克福</RegionOption>
+                <RegionOption value="mo">莫斯科</RegionOption>
+              </Group>
+            </Column>
+          </RegionPanel>
+        </RegionSelect>
+      </div>
+    </div>
+  );
+}