@ebscn/ui 0.0.11 → 1.0.0-beta.0

package/es/components/radio/radio.css

@@ -0,0 +1,93 @@
+.ebscn-radio {
+  --icon-size: 24px;
+  --font-size: var(--ebscn-font-size-8);
+  --gap: 12px;
+  display: inline-flex;
+  vertical-align: text-bottom;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+}
+.ebscn-radio input[type='radio'] {
+  display: none;
+}
+.ebscn-radio.ebscn-radio-small {
+  --icon-size: 16px;
+  --font-size: var(--ebscn-font-size-4);
+  --gap: 9px;
+}
+.ebscn-radio .ebscn-radio-icon {
+  flex: none;
+  border-radius: var(--icon-size);
+  border: 1px solid var(--ebscn-color-light);
+  box-sizing: border-box;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  color: var(--ebscn-color-text-light-solid);
+}
+.ebscn-radio .ebscn-radio-icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.ebscn-radio div.ebscn-radio-icon.ebscn-radio-only-icon {
+  color: var(--ebscn-color-primary);
+  background-color: var(--ebscn-color-background);
+}
+.ebscn-radio.ebscn-radio-block {
+  display: flex;
+}
+.ebscn-radio.ebscn-radio-checked .ebscn-radio-icon {
+  border-color: var(--ebscn-color-primary);
+  background-color: var(--ebscn-color-primary);
+}
+.ebscn-radio.ebscn-radio-disabled {
+  cursor: not-allowed;
+}
+.ebscn-radio.ebscn-radio-disabled .ebscn-radio-content {
+  opacity: 0.4;
+}
+.ebscn-radio.ebscn-radio-disabled .ebscn-radio-icon {
+  background-color: #e4e4e4;
+  border-color: #d9d9d9;
+  opacity: 0.4;
+}
+.ebscn-radio.ebscn-radio-disabled.ebscn-radio-checked .ebscn-radio-icon {
+  background-color: var(--ebscn-color-primary);
+}
+.ebscn-radio .ebscn-radio-custom-icon {
+  font-size: var(--icon-size);
+}
+.ebscn-radio.ebscn-radio-indeterminate .ebscn-radio-icon {
+  background-color: var(--ebscn-color-background);
+  color: var(--ebscn-color-primary);
+}
+.ebscn-radio-content {
+  flex: 0 1 auto;
+  font-size: var(--font-size);
+  padding-left: var(--gap);
+}
+.ebscn-radio .ebscn-radio-icon-right-input {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.ebscn-radio .ebscn-radio-icon-right-input .ebscn-radio-content {
+  padding-left: 0;
+  height: 100%;
+}
+.ebscn-radio .ebscn-radio-icon-right-input .ebscn-radio-icon.ebscn-radio-only-icon {
+  margin-right: 16px;
+  height: 100%;
+  border-color: transparent;
+}
+.ebscn-radio .ebscn-radio-icon-right-input .ebscn-radio-icon.ebscn-radio-only-icon svg {
+  vertical-align: middle;
+}
+.ebscn-radio-icon-right {
+  width: 100%;
+  height: 100%;
+}

package/es/components/radio/radio.d.ts

@@ -0,0 +1,19 @@
+import type { FC, ReactNode } from 'react';
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type RadioValue = string | number;
+export type RadioProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    value?: RadioValue;
+    block?: boolean;
+    id?: string;
+    icon?: (checked: boolean) => ReactNode;
+    children?: ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    size?: 'normal' | 'small';
+    iconRight?: boolean;
+} & NativeProps<'--icon-size' | '--font-size' | '--gap'>;
+export declare const Radio: FC<RadioProps>;

package/es/components/radio/radio.js

@@ -0,0 +1,82 @@
+import { CheckIcon, CheckOnlyIcon, UncheckIcon } from '../..';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import { devWarning } from '../../utils/dev-log';
+import { isDev } from '../../utils/is-dev';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import { mergeProps } from '../../utils/with-default-props';
+import { NativeInput } from '../checkbox/native-input';
+import { RadioGroupContext } from './group-context';
+var classPrefix = "ebscn-radio";
+var defaultProps = {
+  defaultChecked: false,
+  size: 'normal',
+  iconRight: false
+};
+export var Radio = function (p) {
+  var _a;
+  var props = mergeProps(defaultProps, p);
+  var groupContext = useContext(RadioGroupContext);
+  var _b = usePropsValue({
+      value: props.checked,
+      defaultValue: props.defaultChecked,
+      onChange: props.onChange
+    }),
+    checked = _b[0],
+    setChecked = _b[1];
+  var disabled = props.disabled;
+  var value = props.value;
+  if (groupContext && value !== undefined) {
+    if (isDev) {
+      if (p.checked !== undefined) {
+        devWarning('Radio', 'When used within `Radio.Group`, the `checked` prop of `Radio` will not work.');
+      }
+      if (p.defaultChecked !== undefined) {
+        devWarning('Radio', 'When used within `Radio.Group`, the `defaultChecked` prop of `Radio` will not work.');
+      }
+    }
+    checked = groupContext.value.includes(value);
+    setChecked = function (innerChecked) {
+      var _a;
+      if (innerChecked) {
+        groupContext.check(value);
+      } else {
+        groupContext.uncheck(value);
+      }
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, innerChecked);
+    };
+    disabled = disabled || groupContext.disabled;
+  }
+  var renderIcon = function () {
+    if (props.icon) {
+      return React.createElement("div", {
+        className: "".concat(classPrefix, "-custom-icon")
+      }, props.icon(checked));
+    }
+    if (props.iconRight) {
+      return checked && React.createElement("div", {
+        className: "".concat(classPrefix, "-icon ").concat(classPrefix, "-only-icon")
+      }, React.createElement(CheckOnlyIcon, null));
+    }
+    return React.createElement("div", {
+      className: "".concat(classPrefix, "-icon")
+    }, checked ? React.createElement(CheckIcon, null) : React.createElement(UncheckIcon, null));
+  };
+  return withNativeProps(props, React.createElement("label", {
+    onClick: props.onClick,
+    className: classNames(classPrefix, (_a = {}, _a["".concat(classPrefix, "-checked")] = checked, _a["".concat(classPrefix, "-disabled")] = disabled, _a["".concat(classPrefix, "-block")] = props.block, _a["".concat(classPrefix, "-small")] = props.size === 'small', _a["".concat(classPrefix, "-icon-right")] = props.iconRight, _a))
+  }, React.createElement(NativeInput, {
+    type: "radio",
+    checked: checked,
+    onChange: setChecked,
+    disabled: disabled,
+    id: props.id
+  }), props.iconRight ? React.createElement("div", {
+    className: "".concat(classPrefix, "-icon-right-input")
+  }, props.children && React.createElement("div", {
+    className: "".concat(classPrefix, "-content")
+  }, props.children), renderIcon()) : React.createElement(React.Fragment, null, renderIcon(), props.children && React.createElement("div", {
+    className: "".concat(classPrefix, "-content")
+  }, props.children))));
+};

package/es/components/search/index.d.ts

@@ -0,0 +1,3 @@
+import './search.less';
+import Search from './search';
+export default Search;

package/es/components/search/index.js

@@ -0,0 +1,3 @@
+import "./search.css";
+import Search from './search';
+export default Search;

package/es/components/search/search.css

@@ -0,0 +1,53 @@
+.ebscn-search {
+  display: flex;
+}
+.ebscn-search .ebscn-search-box {
+  box-sizing: border-box;
+  height: 32px;
+  line-height: 20px;
+  padding: 6px 8px;
+  font-size: 14px;
+  background-color: #F8F9FC;
+  flex: 1;
+  border-radius: 16px;
+}
+.ebscn-search .ebscn-search-box .ebscn-search-search-icon {
+  vertical-align: middle;
+  margin-right: 6px;
+  color: var(--ebscn-color-weak);
+  cursor: pointer;
+}
+.ebscn-search .ebscn-search-box .ebscn-search-clear-icon {
+  vertical-align: middle;
+  color: var(--ebscn-color-light);
+  cursor: pointer;
+}
+.ebscn-search .ebscn-search-box .ebscn-search-input {
+  border: none;
+  background: transparent;
+  outline: none;
+  color: var(--ebscn-color-text);
+  width: calc(100% - 40px);
+}
+.ebscn-search .ebscn-search-box .ebscn-search-input::-webkit-input-placeholder {
+  color: var(--ebscn-color-weak);
+}
+.ebscn-search .ebscn-search-box .ebscn-search-input::placeholder {
+  color: var(--ebscn-color-weak);
+}
+.ebscn-search .ebscn-search-text {
+  width: 54px;
+  text-align: center;
+  line-height: 32px;
+  cursor: pointer;
+}
+.ebscn-search .ebscn-search-two-icon {
+  width: 100px;
+  display: flex;
+  justify-content: space-around;
+}
+.ebscn-search .ebscn-search-two-icon .ebscn-search-two-icon-item svg {
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+}

package/es/components/search/search.d.ts

@@ -0,0 +1,15 @@
+import type { FC, ReactNode } from 'react';
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export type Props = Pick<NativeInputProps, 'autoFocus' | 'onKeyDown' | 'id' | 'placeholder' | 'disabled'> & {
+    value?: string;
+    defaultValue?: string;
+    onSearch: (val: string) => void;
+    onClear?: () => void;
+    searchLayout?: 'normal' | 'text' | 'twoIcon';
+    children?: string | ReactNode[] | ReactNode;
+    debounce?: number;
+} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--text-align'>;
+declare const Search: FC<Props>;
+export default Search;

package/es/components/search/search.js

@@ -0,0 +1,102 @@
+import { ClearIcon, SearchIcon } from '../..';
+import { useDebounceFn } from 'ahooks';
+import React, { useRef } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import { isIOS } from '../../utils/validate';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = "ebscn-search";
+var defaultProps = {
+  searchLayout: 'normal',
+  placeholder: '请输入业务关键字',
+  defaultValue: '',
+  debounce: 0
+};
+var Search = function (p) {
+  var props = mergeProps(defaultProps, p);
+  var searchLayout = props.searchLayout;
+  var _a = usePropsValue(props),
+    value = _a[0],
+    setValue = _a[1];
+  var compositionStartRef = useRef(false);
+  var nativeInputRef = useRef(null);
+  var debouncedSearch = useDebounceFn(props.onSearch, {
+    wait: props.debounce
+  }).run;
+  // 防抖大于0时使用新函数执行回调
+  var _search = props.debounce > 0 ? debouncedSearch : props.onSearch;
+  var onKeydown = function (e) {
+    if (e.code === 'Enter' || e.keyCode === 13) {
+      _search(value);
+    }
+  };
+  var onChange = function (e) {
+    setValue(e.target.value);
+    _search(e.target.value);
+  };
+  var onClear = function () {
+    var _a, _b;
+    setValue('');
+    (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props);
+    // https://github.com/ant-design/ant-design-mobile/issues/5212
+    if (isIOS() && compositionStartRef.current) {
+      compositionStartRef.current = false;
+      (_b = nativeInputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+    }
+  };
+  var SearchInput = React.createElement("div", {
+    className: "".concat(classPrefix, "-box")
+  }, React.createElement(SearchIcon, {
+    className: "".concat(classPrefix, "-search-icon")
+  }), React.createElement("input", {
+    ref: nativeInputRef,
+    type: "text",
+    className: "".concat(classPrefix, "-input"),
+    id: props.id,
+    value: value,
+    placeholder: props.placeholder,
+    autoFocus: props.autoFocus,
+    disabled: props.disabled,
+    role: "search",
+    onCompositionStart: function () {
+      compositionStartRef.current = true;
+    },
+    onCompositionEnd: function () {
+      compositionStartRef.current = false;
+    },
+    onChange: onChange,
+    onKeyDown: onKeydown
+  }), React.createElement("span", {
+    className: "".concat(classPrefix, "-clear-icon-container"),
+    onClick: onClear
+  }, React.createElement(ClearIcon, {
+    className: "".concat(classPrefix, "-clear-icon")
+  })));
+  // 支持字符串，reactNode和ReactNode[], 统一处理为ReactNode[]
+  var children = typeof props.children === 'string' || !Array.isArray(props.children) ? [React.createElement(React.Fragment, null, props.children)] : props.children;
+  var ret = React.createElement(React.Fragment, null);
+  if (searchLayout === 'text' && children.length > 0) {
+    ret = React.createElement("div", {
+      className: "".concat(classPrefix)
+    }, SearchInput, React.createElement("span", {
+      className: "".concat(classPrefix, "-text")
+    }, children[0]));
+  } else if (searchLayout === 'twoIcon' && children.length > 1) {
+    ret = React.createElement("div", {
+      className: "".concat(classPrefix)
+    }, SearchInput, React.createElement("span", {
+      className: "".concat(classPrefix, "-two-icon")
+    }, children.map(function (item, index) {
+      return React.createElement("div", {
+        className: "".concat(classPrefix, "-two-icon-item"),
+        key: index
+      }, item);
+    })));
+  } else {
+    ret = React.createElement("div", {
+      className: "".concat(classPrefix)
+    }, SearchInput);
+  }
+  return withNativeProps(props, ret);
+};
+export default Search;

package/es/components/selector/check-mark.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CheckMark: React.MemoExoticComponent<() => React.JSX.Element>;

package/es/components/selector/check-mark.js

@@ -0,0 +1,29 @@
+import React, { memo } from 'react';
+export var CheckMark = memo(function () {
+  return React.createElement("svg", {
+    width: '17px',
+    height: '13px',
+    viewBox: '0 0 17 13',
+    version: '1.1',
+    xmlns: 'http://www.w3.org/2000/svg'
+  }, React.createElement("g", {
+    stroke: 'none',
+    strokeWidth: '1',
+    fill: 'none',
+    fillRule: 'evenodd',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
+  }, React.createElement("g", {
+    transform: 'translate(-2832.000000, -1103.000000)',
+    stroke: '#FFFFFF',
+    strokeWidth: '3'
+  }, React.createElement("g", {
+    transform: 'translate(2610.000000, 955.000000)'
+  }, React.createElement("g", {
+    transform: 'translate(24.000000, 91.000000)'
+  }, React.createElement("g", {
+    transform: 'translate(179.177408, 36.687816)'
+  }, React.createElement("polyline", {
+    points: '34.2767388 22 24.797043 31.4796958 21 27.6826527'
+  })))))));
+});

package/es/components/selector/index.d.ts

@@ -0,0 +1,4 @@
+import './selector.less';
+import { Selector } from './selector';
+export type { SelectorProps, SelectorOption } from './selector';
+export default Selector;

package/es/components/selector/index.js

@@ -0,0 +1,3 @@
+import "./selector.css";
+import { Selector } from './selector';
+export default Selector;

package/es/components/selector/selector.css

@@ -0,0 +1,71 @@
+.ebscn-selector {
+  --color: var(--ebscn-color-fill-content);
+  --checked-color: var(--ebscn-color-wathet);
+  --text-color: var(--ebscn-color-text);
+  --checked-text-color: var(--ebscn-color-primary);
+  --border: none;
+  --checked-border: none;
+  --border-radius: 5px;
+  --padding: 8px 16px;
+  --gap: 8px;
+  ---gap: var(--gap);
+  ---gap-horizontal: var(--gap-horizontal, var(--gap));
+  ---gap-vertical: var(--gap-vertical, var(--gap));
+  overflow: hidden;
+  font-size: var(--ebscn-font-size-7);
+  line-height: 1.4;
+}
+.ebscn-selector .ebscn-space.ebscn-space {
+  --gap: 12px;
+}
+.ebscn-selector .ebscn-grid {
+  --gap: var(---gap);
+  --gap-horizontal: var(---gap-horizontal);
+  --gap-vertical: var(---gap-vertical);
+}
+.ebscn-selector-item {
+  padding: var(--padding);
+  position: relative;
+  background-color: var(--color);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  color: var(--text-color);
+  opacity: 1;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  overflow: hidden;
+  vertical-align: top;
+}
+.ebscn-selector-item-description {
+  font-size: var(--ebscn-font-size-main);
+  color: var(--ebscn-color-weak);
+}
+.ebscn-selector-item-active,
+.ebscn-selector-item-multiple-active {
+  color: var(--checked-text-color);
+  background-color: var(--checked-color);
+  border: var(--checked-border);
+}
+.ebscn-selector-item .ebscn-selector-check-mark-wrapper {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border-top: solid 8px transparent;
+  border-bottom: solid 8px var(--ebscn-color-primary);
+  border-left: solid 10px transparent;
+  border-right: solid 10px var(--ebscn-color-primary);
+}
+.ebscn-selector-item .ebscn-selector-check-mark-wrapper > svg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 6px;
+  width: 8px;
+}
+.ebscn-selector-item-disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}

package/es/components/selector/selector.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { GridProps } from '../grid';
+import type { FieldNamesType, BaseOptionType } from '../../hooks';
+type SelectorValue = string | number;
+export type SelectorOption<V> = {
+    label?: ReactNode;
+    description?: ReactNode;
+    value?: V;
+    disabled?: boolean;
+} & BaseOptionType;
+export type SelectorProps<V> = {
+    options: SelectorOption<V>[];
+    columns?: GridProps['columns'];
+    multiple?: boolean;
+    disabled?: boolean;
+    defaultValue?: V[];
+    value?: V[];
+    onChange?: (v: V[], extend: {
+        items: SelectorOption<V>[];
+    }) => void;
+    showCheckMark?: boolean;
+    fieldNames?: FieldNamesType;
+} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding' | '--gap' | '--gap-vertical' | '--gap-horizontal'>;
+export declare const Selector: <V extends SelectorValue>(p: SelectorProps<V>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

package/es/components/selector/selector.js

@@ -0,0 +1,86 @@
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+import classNames from 'classnames';
+import React from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import Space from '../space';
+import Grid from '../grid';
+import { usePropsValue } from '../../utils/use-props-value';
+import { CheckMark } from './check-mark';
+import { useFieldNames } from '../../hooks';
+var classPrefix = "ebscn-selector";
+var defaultProps = {
+  multiple: false,
+  defaultValue: [],
+  showCheckMark: true
+};
+export var Selector = function (p) {
+  var props = mergeProps(defaultProps, p);
+  var _a = useFieldNames(props.fieldNames),
+    labelName = _a[0],
+    valueName = _a[1],
+    disabledName = _a[3];
+  var _b = usePropsValue({
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onChange: function (val) {
+        var _a;
+        var extend = {
+          get items() {
+            return props.options.filter(function (option) {
+              return val.includes(option[valueName]);
+            });
+          }
+        };
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
+      }
+    }),
+    value = _b[0],
+    setValue = _b[1];
+  var items = props.options.map(function (option) {
+    var _a;
+    var active = (value || []).includes(option[valueName]);
+    var disabled = option[disabledName] || props.disabled;
+    var itemCls = classNames("".concat(classPrefix, "-item"), (_a = {}, _a["".concat(classPrefix, "-item-active")] = active && !props.multiple, _a["".concat(classPrefix, "-item-multiple-active")] = active && props.multiple, _a["".concat(classPrefix, "-item-disabled")] = disabled, _a));
+    return React.createElement("div", {
+      key: option[valueName],
+      className: itemCls,
+      onClick: function () {
+        if (disabled) {
+          return;
+        }
+        if (props.multiple) {
+          var val = active ? value.filter(function (v) {
+            return v !== option[valueName];
+          }) : __spreadArray(__spreadArray([], value, true), [option[valueName]], false);
+          setValue(val);
+        } else {
+          var val = active ? [] : [option[valueName]];
+          setValue(val);
+        }
+      },
+      role: 'option',
+      "aria-selected": active && !props.multiple || active && props.multiple
+    }, option[labelName], option.description && React.createElement("div", {
+      className: "".concat(classPrefix, "-item-description")
+    }, option.description), active && props.showCheckMark && React.createElement("div", {
+      className: "".concat(classPrefix, "-check-mark-wrapper")
+    }, React.createElement(CheckMark, null)));
+  });
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix,
+    role: 'listbox'
+  }, props.columns ? React.createElement(Grid, {
+    columns: props.columns
+  }, items) : React.createElement(Space, {
+    wrap: true
+  }, items)));
+};

package/es/components/skeleton/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import './skeleton.less';
+export type { SkeletonProps, SkeletonTitleProps, SkeletonCircleProps, SkeletonImgProps, SkeletonPrimaryProps } from './skeleton';
+declare const _default: import("react").FC<import("./skeleton").SkeletonProps> & {
+    Title: import("react").FC<import("./skeleton").SkeletonTitleProps>;
+    Paragraph: import("react").FC<import("./skeleton").SkeletonParagraphProps>;
+    Img: import("react").FC<import("./skeleton").SkeletonImgProps>;
+    Circle: import("react").FC<import("./skeleton").SkeletonCircleProps>;
+    Primary: import("react").FC<import("./skeleton").SkeletonPrimaryProps>;
+};
+export default _default;

package/es/components/skeleton/index.js

@@ -0,0 +1,10 @@
+import "./skeleton.css";
+import { Skeleton, SkeletonParagraph, SkeletonTitle, SkeletonImg, SkeletonCircle, SkeletonPrimary } from './skeleton';
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+export default attachPropertiesToComponent(Skeleton, {
+  Title: SkeletonTitle,
+  Paragraph: SkeletonParagraph,
+  Img: SkeletonImg,
+  Circle: SkeletonCircle,
+  Primary: SkeletonPrimary
+});