antd-mobile 0.0.0-dev-626cbf51f

package/2x/es/components/radio/index.js

@@ -0,0 +1,7 @@
+import "./radio.css";
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { Group } from './group';
+import { Radio } from './radio';
+export default attachPropertiesToComponent(Radio, {
+  Group
+});

package/2x/es/components/radio/radio.css

@@ -0,0 +1,63 @@
+.adm-radio {
+  --icon-size: 44px;
+  --font-size: 34px;
+  --gap: 16px;
+  display: inline-flex;
+  vertical-align: text-bottom;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+}
+
+.adm-radio input {
+  display: none;
+}
+
+.adm-radio .adm-radio-icon {
+  flex: none;
+  border: 2px solid var(--adm-color-light);
+  border-radius: var(--icon-size);
+  box-sizing: border-box;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  color: var(--adm-color-white);
+}
+
+.adm-radio .adm-radio-icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.adm-radio.adm-radio-block {
+  display: flex;
+}
+
+.adm-radio.adm-radio-checked .adm-radio-icon {
+  border-color: var(--adm-color-primary);
+  background-color: var(--adm-color-primary);
+}
+
+.adm-radio.adm-radio-disabled {
+  cursor: not-allowed;
+}
+
+.adm-radio.adm-radio-disabled .adm-radio-content {
+  opacity: 0.4;
+}
+
+.adm-radio.adm-radio-disabled .adm-radio-icon {
+  color: #b7b7b7;
+  border-color: var(--adm-color-light);
+  background-color: #f5f5f5;
+}
+
+.adm-radio .adm-radio-custom-icon {
+  font-size: var(--icon-size);
+}
+
+.adm-radio-content {
+  flex: 0 1 auto;
+  font-size: var(--font-size);
+  padding-left: var(--gap);
+}

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

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

package/2x/es/components/radio/radio.js

@@ -0,0 +1,83 @@
+import React, { useContext } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import classNames from 'classnames';
+import { RadioGroupContext } from './group-context';
+import { usePropsValue } from '../../utils/use-props-value';
+import { mergeProps } from '../../utils/with-default-props';
+import { CheckIcon } from '../checkbox/check-icon';
+import { devWarning } from '../../utils/dev-log';
+import { isDev } from '../../utils/is-dev';
+import { NativeInput } from '../checkbox/native-input';
+const classPrefix = `adm-radio`;
+const defaultProps = {
+  defaultChecked: false
+};
+export const Radio = p => {
+  const props = mergeProps(defaultProps, p);
+  const groupContext = useContext(RadioGroupContext);
+  let [checked, setChecked] = usePropsValue({
+    value: props.checked,
+    defaultValue: props.defaultChecked,
+    onChange: props.onChange
+  });
+  let disabled = props.disabled;
+  const {
+    value
+  } = props;
+
+  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 = checked => {
+      var _a;
+
+      if (checked) {
+        groupContext.check(value);
+      } else {
+        groupContext.uncheck(value);
+      }
+
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, checked);
+    };
+
+    disabled = disabled || groupContext.disabled;
+  }
+
+  const renderIcon = () => {
+    if (props.icon) {
+      return React.createElement("div", {
+        className: `${classPrefix}-custom-icon`
+      }, props.icon(checked));
+    }
+
+    return React.createElement("div", {
+      className: `${classPrefix}-icon`
+    }, checked && React.createElement(CheckIcon, null));
+  };
+
+  return withNativeProps(props, React.createElement("label", {
+    className: classNames(classPrefix, {
+      [`${classPrefix}-checked`]: checked,
+      [`${classPrefix}-disabled`]: disabled,
+      [`${classPrefix}-block`]: props.block
+    })
+  }, React.createElement(NativeInput, {
+    type: 'radio',
+    checked: checked,
+    onChange: setChecked,
+    disabled: disabled,
+    id: props.id
+  }), renderIcon(), props.children && React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, props.children)));
+};

package/2x/es/components/rate/index.d.ts

@@ -0,0 +1,4 @@
+import './rate.less';
+import { Rate } from './rate';
+export type { RateProps } from './rate';
+export default Rate;

package/2x/es/components/rate/index.js

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

package/2x/es/components/rate/rate.css

@@ -0,0 +1,37 @@
+.adm-rate {
+  --star-size: 48px;
+  --active-color: #ffd21e;
+  --inactive-color: var(--adm-color-light);
+  display: inline-flex;
+}
+
+.adm-rate-box {
+  position: relative;
+}
+
+.adm-rate-star {
+  padding: calc(var(--star-size) / 8);
+  line-height: var(--star-size);
+  font-size: var(--star-size);
+  color: var(--inactive-color);
+  text-align: center;
+  overflow: hidden;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.adm-rate-star-half {
+  padding-right: 0;
+  width: 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.adm-rate-star-active {
+  color: var(--active-color);
+}
+
+.adm-rate-star-readonly {
+  cursor: unset;
+}

package/2x/es/components/rate/rate.d.ts

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type RateProps = {
+    allowClear?: boolean;
+    allowHalf?: boolean;
+    character?: React.ReactNode;
+    count?: number;
+    defaultValue?: number;
+    readOnly?: boolean;
+    value?: number;
+    onChange?: (value: number) => void;
+} & NativeProps<'--star-size' | '--active-color' | '--inactive-color'>;
+export declare const Rate: FC<RateProps>;

package/2x/es/components/rate/rate.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import { StarFill } from 'antd-mobile-icons';
+import { usePropsValue } from '../../utils/use-props-value';
+const classPrefix = `adm-rate`;
+const defaultProps = {
+  count: 5,
+  allowHalf: false,
+  character: React.createElement(StarFill, null),
+  defaultValue: 0,
+  readOnly: false,
+  allowClear: true
+};
+export const Rate = p => {
+  const props = mergeProps(defaultProps, p);
+  const [value, setValue] = usePropsValue(props);
+  const starList = Array(props.count).fill(null);
+
+  function renderStar(v, half) {
+    return React.createElement("div", {
+      className: classNames(`${classPrefix}-star`, {
+        [`${classPrefix}-star-active`]: value >= v,
+        [`${classPrefix}-star-half`]: half,
+        [`${classPrefix}-star-readonly`]: props.readOnly
+      }),
+      onClick: () => {
+        if (props.readOnly) return;
+
+        if (props.allowClear && value === v) {
+          setValue(0);
+        } else {
+          setValue(v);
+        }
+      }
+    }, props.character);
+  }
+
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix
+  }, starList.map((_, i) => React.createElement("div", {
+    key: i,
+    className: classNames(`${classPrefix}-box`)
+  }, props.allowHalf && renderStar(i + 0.5, true), renderStar(i + 1, false)))));
+};

package/2x/es/components/result/index.d.ts

@@ -0,0 +1,4 @@
+import './result.less';
+import { Result } from './result';
+export type { ResultProps } from './result';
+export default Result;

package/2x/es/components/result/index.js

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

package/2x/es/components/result/result.css

@@ -0,0 +1,51 @@
+.adm-result {
+  padding: 64px 24px;
+  background-color: var(--adm-color-white);
+}
+
+.adm-result-icon {
+  box-sizing: border-box;
+  width: 128px;
+  height: 128px;
+  margin: 0 auto 40px auto;
+  padding: 12px;
+}
+
+.adm-result-icon .antd-mobile-icon {
+  font-size: 104px;
+}
+
+.adm-result-title {
+  color: var(--adm-color-text);
+  font-size: 36px;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.adm-result-description {
+  margin-top: 16px;
+  color: var(--adm-color-weak);
+  font-size: 26px;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.adm-result-success .adm-result-icon .antd-mobile-icon {
+  color: var(--adm-color-primary);
+}
+
+.adm-result-error .adm-result-icon .antd-mobile-icon {
+  color: var(--adm-color-danger);
+}
+
+.adm-result-info .adm-result-icon .antd-mobile-icon {
+  color: var(--adm-color-primary);
+}
+
+.adm-result-waiting .adm-result-icon .antd-mobile-icon {
+  color: var(--adm-color-success);
+}
+
+.adm-result-warning .adm-result-icon .antd-mobile-icon {
+  color: var(--adm-color-warning);
+}

package/2x/es/components/result/result.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type ResultProps = {
+    status: 'success' | 'error' | 'info' | 'waiting' | 'warning';
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+} & NativeProps;
+export declare const Result: FC<ResultProps>;

package/2x/es/components/result/result.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CheckCircleFill, CloseCircleFill, InformationCircleFill, ClockCircleFill, ExclamationCircleFill } from 'antd-mobile-icons';
+import { withNativeProps } from '../../utils/native-props';
+const classPrefix = `adm-result`;
+const iconRecord = {
+  success: CheckCircleFill,
+  error: CloseCircleFill,
+  info: InformationCircleFill,
+  waiting: ClockCircleFill,
+  warning: ExclamationCircleFill
+};
+export const Result = props => {
+  const {
+    status,
+    title,
+    description,
+    icon
+  } = props;
+  if (!status) return null;
+  const resultIcon = icon || React.createElement(iconRecord[status]);
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, `${classPrefix}-${status}`)
+  }, React.createElement("div", {
+    className: `${classPrefix}-icon`
+  }, resultIcon), React.createElement("div", {
+    className: `${classPrefix}-title`
+  }, title), description ? React.createElement("div", {
+    className: `${classPrefix}-description`
+  }, description) : null));
+};

package/2x/es/components/safe-area/index.d.ts

@@ -0,0 +1,4 @@
+import './safe-area.less';
+import { SafeArea } from './safe-area';
+export type { SafeAreaProps } from './safe-area';
+export default SafeArea;

package/2x/es/components/safe-area/index.js

@@ -0,0 +1,3 @@
+import "./safe-area.css";
+import { SafeArea } from './safe-area';
+export default SafeArea;

package/2x/es/components/safe-area/safe-area.css

@@ -0,0 +1,12 @@
+.adm-safe-area {
+  display: block;
+  width: 100%;
+}
+
+.adm-safe-area-position-top {
+  padding-top: calc(env(safe-area-inset-top) * var(--adm-hd));
+}
+
+.adm-safe-area-position-bottom {
+  padding-bottom: calc(env(safe-area-inset-bottom) * var(--adm-hd));
+}

package/2x/es/components/safe-area/safe-area.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type SafeAreaProps = {
+    position: 'top' | 'bottom';
+} & NativeProps;
+export declare const SafeArea: FC<SafeAreaProps>;

package/2x/es/components/safe-area/safe-area.js

@@ -0,0 +1,9 @@
+import { withNativeProps } from '../../utils/native-props';
+import React from 'react';
+import classNames from 'classnames';
+const classPrefix = 'adm-safe-area';
+export const SafeArea = props => {
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, `${classPrefix}-position-${props.position}`)
+  }));
+};

package/2x/es/components/scroll-mask/index.d.ts

@@ -0,0 +1,4 @@
+import './scroll-mask.less';
+import { ScrollMask } from './scroll-mask';
+export type { ScrollMaskProps } from './scroll-mask';
+export default ScrollMask;

package/2x/es/components/scroll-mask/index.js

@@ -0,0 +1,3 @@
+import "./scroll-mask.css";
+import { ScrollMask } from './scroll-mask';
+export default ScrollMask;

package/2x/es/components/scroll-mask/scroll-mask.css

@@ -0,0 +1,19 @@
+.adm-scroll-mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 60px;
+  height: 100%;
+  pointer-events: none;
+}
+
+.adm-scroll-mask-left {
+  left: 0;
+  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+}
+
+.adm-scroll-mask-right {
+  right: 0;
+  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
+}

package/2x/es/components/scroll-mask/scroll-mask.d.ts

@@ -0,0 +1,5 @@
+import { FC, RefObject } from 'react';
+export declare type ScrollMaskProps = {
+    scrollTrackRef: RefObject<HTMLElement>;
+};
+export declare const ScrollMask: FC<ScrollMaskProps>;

package/2x/es/components/scroll-mask/scroll-mask.js

@@ -0,0 +1,59 @@
+import React, { useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import { animated, useSpring } from '@react-spring/web';
+import { useThrottleFn } from 'ahooks';
+const classPrefix = `adm-scroll-mask`;
+export const ScrollMask = props => {
+  const maskRef = useRef(null);
+  const [{
+    leftMaskOpacity,
+    rightMaskOpacity
+  }, api] = useSpring(() => ({
+    leftMaskOpacity: 0,
+    rightMaskOpacity: 0,
+    config: {
+      clamp: true
+    }
+  }));
+  const {
+    run: updateMask
+  } = useThrottleFn((immediate = false) => {
+    const mask = maskRef.current;
+    if (!mask) return;
+    const scrollEl = props.scrollTrackRef.current;
+    if (!scrollEl) return;
+    const scrollLeft = scrollEl.scrollLeft;
+    const showLeftMask = scrollLeft > 0;
+    const showRightMask = scrollLeft + scrollEl.offsetWidth < scrollEl.scrollWidth;
+    api.start({
+      leftMaskOpacity: showLeftMask ? 1 : 0,
+      rightMaskOpacity: showRightMask ? 1 : 0,
+      immediate
+    });
+  }, {
+    wait: 100,
+    trailing: true,
+    leading: true
+  });
+  useEffect(() => {
+    updateMask(true);
+  }, []);
+  useEffect(() => {
+    const scrollEl = props.scrollTrackRef.current;
+    if (!scrollEl) return;
+    scrollEl.addEventListener('scroll', updateMask);
+    return () => scrollEl.removeEventListener('scroll', updateMask);
+  }, []);
+  return React.createElement(React.Fragment, null, React.createElement(animated.div, {
+    ref: maskRef,
+    className: classNames(classPrefix, `${classPrefix}-left`),
+    style: {
+      opacity: leftMaskOpacity
+    }
+  }), React.createElement(animated.div, {
+    className: classNames(classPrefix, `${classPrefix}-right`),
+    style: {
+      opacity: rightMaskOpacity
+    }
+  }));
+};

package/2x/es/components/search-bar/index.d.ts

@@ -0,0 +1,4 @@
+import './search-bar.less';
+import { SearchBar } from './search-bar';
+export type { SearchBarProps, SearchBarRef } from './search-bar';
+export default SearchBar;

package/2x/es/components/search-bar/index.js

@@ -0,0 +1,3 @@
+import "./search-bar.css";
+import { SearchBar } from './search-bar';
+export default SearchBar;

package/2x/es/components/search-bar/search-bar.css

@@ -0,0 +1,67 @@
+.adm-search-bar {
+  --height: 64px;
+  --padding-left: 16px;
+  --background: #f5f5f5;
+  --border-radius: 12px;
+  --placeholder-color: var(--adm-color-weak);
+  ---placeholder-color: var(--placeholder-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--height);
+}
+
+.adm-search-bar .adm-search-bar-input-box {
+  flex: auto;
+  background: var(--background);
+  border-radius: var(--border-radius);
+  border: solid 2px transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-left: var(--padding-left);
+}
+
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input-box-icon {
+  flex: none;
+  color: var(--adm-color-light);
+  font-size: 32px;
+}
+
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
+  flex: auto;
+  padding: 8px 16px 8px 8px;
+  height: calc(var(--height) - 4px);
+  box-sizing: border-box;
+}
+
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input {
+  --placeholder-color: var(---placeholder-color);
+  --font-size: 30px;
+}
+
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input-element {
+  line-height: 38px;
+}
+
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-search-bar-input-without-icon {
+  padding-left: 16px;
+}
+
+.adm-search-bar .adm-search-bar-suffix {
+  flex: none;
+  margin-left: 8px;
+}
+
+.adm-search-bar .adm-search-bar-cancel-button.adm-button {
+  padding: 6px 24px;
+}
+
+.adm-search-bar-active .adm-input.adm-input.adm-input {
+  --placeholder-color: var(--adm-color-light);
+}
+
+.adm-search-bar-active .adm-search-bar-input-box {
+  border-color: var(--adm-color-primary);
+  background: var(--adm-color-white);
+}

package/2x/es/components/search-bar/search-bar.d.ts

@@ -0,0 +1,34 @@
+import React, { ReactNode } from 'react';
+import { InputRef, InputProps } from '../input';
+import { NativeProps } from '../../utils/native-props';
+export declare type SearchBarRef = InputRef;
+export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'onClear'> & {
+    value?: string;
+    defaultValue?: string;
+    maxLength?: number;
+    placeholder?: string;
+    clearable?: boolean;
+    onlyShowClearWhenFocus?: boolean;
+    showCancelButton?: boolean | ((focus: boolean, value: string) => boolean);
+    cancelText?: string;
+    icon?: ReactNode;
+    clearOnCancel?: boolean;
+    onSearch?: (val: string) => void;
+    onChange?: (val: string) => void;
+    onCancel?: () => void;
+} & NativeProps<'--background' | '--border-radius' | '--placeholder-color' | '--height' | '--padding-left'>;
+export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps, "onFocus" | "onBlur" | "onClear"> & {
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    maxLength?: number | undefined;
+    placeholder?: string | undefined;
+    clearable?: boolean | undefined;
+    onlyShowClearWhenFocus?: boolean | undefined;
+    showCancelButton?: boolean | ((focus: boolean, value: string) => boolean) | undefined;
+    cancelText?: string | undefined;
+    icon?: ReactNode;
+    clearOnCancel?: boolean | undefined;
+    onSearch?: ((val: string) => void) | undefined;
+    onChange?: ((val: string) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+} & NativeProps<"--border-radius" | "--height" | "--padding-left" | "--background" | "--placeholder-color"> & React.RefAttributes<InputRef>>;