@douyinfe/semi-foundation 2.28.0-beta.0 → 2.28.0

package/lib/es/progress/generates.js

@@ -0,0 +1,243 @@
+import { strings } from './constants';
+
+function generateColor(s, percent, gradient) {
+  try {
+    const gradientColorArr = generate(s, percent, gradient);
+    if (gradientColorArr.length !== 0) return gradientColorArr;
+  } catch (e) {
+    return undefined;
+  }
+
+  return undefined;
+}
+
+function generate(s, percent, gradient) {
+  s.sort((a, b) => a.percent - b.percent);
+
+  if (s[0].percent > percent) {
+    return strings.STROKE_DEFAULT;
+  }
+
+  const endS = s[s.length - 1];
+
+  if (endS.percent < percent) {
+    return formatToHex(endS.color);
+  }
+
+  for (const [index, item] of s.entries()) {
+    if (item.percent === percent) {
+      return formatToHex(item.color);
+    }
+
+    if (percent > item.percent) continue;
+    const oldItem = s[index - 1];
+
+    if (!gradient) {
+      return formatToHex(oldItem.color);
+    }
+
+    return generateGradients({
+      startColor: formatToHex(oldItem.color),
+      endColor: formatToHex(item.color),
+      size: item.percent - oldItem.percent - 1
+    }, percent - oldItem.percent - 1);
+  }
+
+  return undefined;
+}
+
+function generateGradients(g, index) {
+  const {
+    startColor,
+    endColor,
+    size
+  } = g;
+  const sA = startColor.split('');
+  const eA = endColor.split('');
+  const rC = [parseInt(`${sA[1]}${sA[2]}`, 16), parseInt(`${eA[1]}${eA[2]}`, 16)];
+  const gC = [parseInt(`${sA[3]}${sA[4]}`, 16), parseInt(`${eA[3]}${eA[4]}`, 16)];
+  const bC = [parseInt(`${sA[5]}${sA[6]}`, 16), parseInt(`${eA[5]}${eA[6]}`, 16)];
+  const aC = [parseInt(`${sA[7]}${sA[8]}`, 16), parseInt(`${eA[7]}${eA[8]}`, 16)];
+  const rStep = (rC[0] - rC[1]) / (size + 1);
+  const gStep = (gC[0] - gC[1]) / (size + 1);
+  const bStep = (bC[0] - bC[1]) / (size + 1);
+  const aStep = (aC[0] - aC[1]) / (size + 1);
+
+  function tHex(i) {
+    const rS = Math.round(rC[0] - rStep * (i + 1)).toString(16);
+    const gS = Math.round(gC[0] - gStep * (i + 1)).toString(16);
+    const bS = Math.round(bC[0] - bStep * (i + 1)).toString(16);
+    const h = `${padTwo(rS)}${padTwo(gS)}${padTwo(bS)}`;
+    const t = Math.floor(aStep * (i + 1) + aC[1]).toString(16);
+    return toHex.Hex(`#${h}`, t);
+  }
+
+  function padTwo(s) {
+    if (s.length === 1) {
+      return `0${s}`;
+    }
+
+    if (s.length === 0) {
+      return '00';
+    }
+
+    return s;
+  }
+
+  if (typeof index === 'undefined') {
+    const gradientColorArr = [startColor];
+
+    for (let i = 0; i < size; i += 1) {
+      gradientColorArr.push(tHex(i));
+    }
+
+    return gradientColorArr;
+  }
+
+  return tHex(index);
+} // Resolve the colour type contained within `ColorType` to Hex
+
+
+function formatToHex(color) {
+  color = color.trim().toLowerCase(); // Hex
+
+  if (REG_S.hex.test(color)) {
+    return toHex.Hex(color, undefined);
+  } // Hsl or Hsla
+
+
+  if (REG_S.hslA.test(color)) {
+    return toHex.Hex(toHex.HslA(color), undefined);
+  } // Rgb or Rgba
+
+
+  if (REG_S.rgbA.test(color)) {
+    return toHex.Hex(toHex.RgbA(color), undefined);
+  } // Semi Design Tokens
+
+
+  if (REG_S.semiDesignTokens.test(color)) {
+    if (SEMI_DESIGN_TOKENS.ALONG.indexOf(color) !== -1) {
+      return toHex.SemiDesignToken(color);
+    }
+
+    if (SEMI_DESIGN_TOKENS.SEQUENCE.indexOf(color) !== -1) {
+      return toHex.SemiDesignToken(`${color}-5`);
+    }
+
+    return toHex.SemiDesignToken(`${color}`);
+  }
+
+  return undefined;
+}
+
+const toHex = {
+  Hex(color, transparency) {
+    color = color.replace('#', '');
+    if (color.length === 8) return `#${color}`;
+    if (color.length === 6) return `#${color}${transparency || 'ff'}`;
+
+    if (color.length === 3) {
+      color = color.split('').map(c => c + c).join('');
+    }
+
+    return `#${color}${transparency || 'ff'}`;
+  },
+
+  SemiDesignToken(color) {
+    // ! Only produces effects when used, the conditions for running need to occur after the real DOM is rendered
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+
+    const variable = getComputedStyle(document.body).getPropertyValue(`--semi-${color}`);
+    if (variable === '') return undefined;
+    const rgba = `rgba(${variable}, 1)`;
+    return toHex.RgbA(rgba);
+  },
+
+  HslA(color) {
+    const hsla = REG_S.hslA.exec(color);
+    const h = parseInt(hsla[2]);
+    const s = parseInt(hsla[3]) / 100;
+    const l = parseInt(hsla[4]) / 100;
+    const a = hsla[5];
+    const c = (1 - Math.abs(2 * l - 1)) * s,
+          x = c * (1 - Math.abs(h / 60 % 2 - 1)),
+          m = l - c / 2;
+    let r = 0,
+        g = 0,
+        b = 0;
+
+    if (0 <= h && h < 60) {
+      r = c;
+      g = x;
+      b = 0;
+    } else if (60 <= h && h < 120) {
+      r = x;
+      g = c;
+      b = 0;
+    } else if (120 <= h && h < 180) {
+      r = 0;
+      g = c;
+      b = x;
+    } else if (180 <= h && h < 240) {
+      r = 0;
+      g = x;
+      b = c;
+    } else if (240 <= h && h < 300) {
+      r = x;
+      g = 0;
+      b = c;
+    } else if (300 <= h && h < 360) {
+      r = c;
+      g = 0;
+      b = x;
+    }
+
+    r = Math.round((r + m) * 255).toString(16);
+    g = Math.round((g + m) * 255).toString(16);
+    b = Math.round((b + m) * 255).toString(16);
+    return toHex.utils.pAL(r, g, b, a);
+  },
+
+  RgbA(color) {
+    const rgba = REG_S.rgbA.exec(color);
+    const r = parseInt(rgba[2], 10).toString(16),
+          g = parseInt(rgba[3], 10).toString(16),
+          b = parseInt(rgba[4], 10).toString(16),
+          a = rgba[5];
+    return toHex.utils.pAL(r, g, b, a);
+  },
+
+  utils: {
+    pAL(r, g, b, a) {
+      if (r.length == 1) r = '0' + r;
+      if (g.length == 1) g = '0' + g;
+      if (b.length == 1) b = '0' + b;
+
+      if (typeof a !== 'undefined') {
+        a = Math.round(parseInt(a) * 255).toString(16);
+        if (a.length == 1) a = '0' + a;
+        return '#' + r + g + b + a;
+      }
+
+      return '#' + r + g + b;
+    }
+
+  }
+};
+const REG_S = {
+  hex: /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/,
+  hslA: /(hsl)a?\(\s*?(\d+),?\s*?(\d+)%,?\s*?(\d+)%,?\s*?\/?(\s*?[\d.]+)?\s*?\)/,
+  rgbA: /(rgb)a?\(\s*?(\d+),?\s*?(\d+),?\s*?(\d+),?\s*?\/?(\s*?[\d.]+)?\s*?\)/,
+  semiDesignTokens: /(\w+)?-?(\w+)-?(\d)?/
+}; // From src/components/palette.js
+
+const SEMI_DESIGN_TOKENS = {
+  // No sequence
+  ALONG: ["black", "white"],
+  // Sequence: 0-9
+  SEQUENCE: ["amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "light-green", "lime", "orange", "pink", "purple", "red", "teal", "violet", "yellow"]
+};
+export { generateColor };

package/lib/es/radio/constants.d.ts

@@ -0,0 +1,29 @@
+declare const radioClasses: {
+    readonly PREFIX: "semi-radio";
+    readonly INNER: "semi-radio-inner";
+    readonly TEXT: "semi-radio-text";
+    readonly INPUT: "semi-radio-input";
+    readonly CHECKED: "semi-radio-checked";
+    readonly DISABLED: "semi-radio-disabled";
+    readonly BUTTON: "semi-radio-button";
+};
+declare const radioGroupClasses: {
+    readonly PREFIX: "semi-radioGroup";
+    readonly INNER: "semi-radioGroup-inner";
+    readonly TEXT: "semi-radioGroup-text";
+    readonly INPUT: "semi-radioGroup-input";
+    readonly CHECKED: "semi-radioGroup-checked";
+    readonly DISABLED: "semi-radioGroup-disabled";
+};
+declare const strings: {
+    readonly DIRECTION_SET: readonly ["horizontal", "vertical"];
+    readonly DEFAULT_DIRECTION: "horizontal";
+    readonly MODE: readonly ["advanced", ""];
+    readonly TYPE_DEFAULT: "default";
+    readonly TYPE_BUTTON: "button";
+    readonly TYPE_CARD: "card";
+    readonly TYPE_PURECARD: "pureCard";
+    readonly BUTTON_SIZE: readonly ["middle", "small", "large"];
+};
+declare const numbers: {};
+export { radioClasses, radioGroupClasses, strings, numbers };

package/lib/es/radio/constants.js

@@ -0,0 +1,30 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const radioClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-radio`,
+  INNER: `${BASE_CLASS_PREFIX}-radio-inner`,
+  TEXT: `${BASE_CLASS_PREFIX}-radio-text`,
+  INPUT: `${BASE_CLASS_PREFIX}-radio-input`,
+  CHECKED: `${BASE_CLASS_PREFIX}-radio-checked`,
+  DISABLED: `${BASE_CLASS_PREFIX}-radio-disabled`,
+  BUTTON: `${BASE_CLASS_PREFIX}-radio-button`
+};
+const radioGroupClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-radioGroup`,
+  INNER: `${BASE_CLASS_PREFIX}-radioGroup-inner`,
+  TEXT: `${BASE_CLASS_PREFIX}-radioGroup-text`,
+  INPUT: `${BASE_CLASS_PREFIX}-radioGroup-input`,
+  CHECKED: `${BASE_CLASS_PREFIX}-radioGroup-checked`,
+  DISABLED: `${BASE_CLASS_PREFIX}-radioGroup-disabled`
+};
+const strings = {
+  DIRECTION_SET: ['horizontal', 'vertical'],
+  DEFAULT_DIRECTION: 'horizontal',
+  MODE: ['advanced', ''],
+  TYPE_DEFAULT: 'default',
+  TYPE_BUTTON: 'button',
+  TYPE_CARD: 'card',
+  TYPE_PURECARD: 'pureCard',
+  BUTTON_SIZE: ['middle', 'small', 'large']
+};
+const numbers = {};
+export { radioClasses, radioGroupClasses, strings, numbers };

package/lib/es/radio/radioFoundation.d.ts

@@ -0,0 +1,15 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface RadioAdapter extends DefaultAdapter {
+    setHover: (hover: boolean) => void;
+    setChecked: (checked: boolean) => void;
+    setAddonId: () => void;
+    setExtraId: () => void;
+    setFocusVisible: (focusVisible: boolean) => void;
+}
+export default class RadioFoundation extends BaseFoundation<RadioAdapter> {
+    init(): void;
+    setHover(hover: boolean): void;
+    setChecked(checked: boolean): void;
+    handleFocusVisible: (event: any) => void;
+    handleBlur: () => void;
+}

package/lib/es/radio/radioFoundation.js

@@ -0,0 +1,51 @@
+import BaseFoundation from '../base/foundation';
+import warning from '../utils/warning';
+export default class RadioFoundation extends BaseFoundation {
+  constructor() {
+    super(...arguments);
+
+    this.handleFocusVisible = event => {
+      const {
+        target
+      } = event;
+
+      try {
+        if (target.matches(':focus-visible')) {
+          this._adapter.setFocusVisible(true);
+        }
+      } catch (error) {
+        warning(true, 'Warning: [Semi Radio] The current browser does not support the focus-visible');
+      }
+    };
+
+    this.handleBlur = () => {
+      this._adapter.setFocusVisible(false);
+    };
+  }
+
+  init() {
+    const {
+      children,
+      extra,
+      extraId,
+      addonId
+    } = this._adapter.getProps();
+
+    if (children && !addonId) {
+      this._adapter.setAddonId();
+    }
+
+    if (extra && !extraId) {
+      this._adapter.setExtraId();
+    }
+  }
+
+  setHover(hover) {
+    this._adapter.setHover(hover);
+  }
+
+  setChecked(checked) {
+    this._adapter.setChecked(checked);
+  }
+
+}

package/lib/es/radio/radioGroupFoundation.d.ts

@@ -0,0 +1,16 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { RadioChangeEvent } from './radioInnerFoundation';
+export interface RadioGroupAdapter extends DefaultAdapter {
+    isInProps?: (name: string) => boolean;
+    notifyChange?: (e: RadioChangeEvent) => void;
+    setValue?: (value: any) => void;
+}
+export default class RadioGroupFoundation extends BaseFoundation<RadioGroupAdapter> {
+    constructor(adapter: RadioGroupAdapter);
+    init(): void;
+    _getDisplayValue(): any;
+    handleChange(evt: any): void;
+    handlePropValueChange(propValue: any): void;
+    _setValue(value: any): void;
+    destroy(): void;
+}

package/lib/es/radio/radioGroupFoundation.js

@@ -0,0 +1,74 @@
+import BaseFoundation from '../base/foundation';
+export default class RadioGroupFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  }
+
+  init() {
+    const displayValue = this._getDisplayValue();
+
+    this._setValue(displayValue);
+  }
+
+  _getDisplayValue() {
+    const {
+      value,
+      defaultValue
+    } = this.getProps();
+    let displayValue;
+
+    if ('value' in this.getProps()) {
+      displayValue = value;
+    } else if ('defaultValue' in this.getProps()) {
+      displayValue = defaultValue;
+    }
+
+    return displayValue;
+  }
+
+  handleChange(evt) {
+    const mode = this.getProp('mode');
+    const lastValue = this.getState('value');
+    const {
+      checked,
+      value
+    } = evt.target;
+
+    const isControlledComponent = this._adapter.isInProps('value');
+
+    const cbValue = Object.assign(Object.assign({}, evt), {
+      target: Object.assign(Object.assign({}, evt.target), {
+        value
+      })
+    });
+
+    if (mode === 'advanced' && !checked) {
+      cbValue.target.value = undefined;
+    }
+
+    if (!isControlledComponent) {
+      if (mode === 'advanced' && !checked) {
+        this._setValue(undefined);
+      } else {
+        this._setValue(value);
+      }
+    }
+
+    if (mode === 'advanced' || lastValue !== value) {
+      this._adapter.notifyChange(cbValue);
+    }
+  } // call when prop.value change
+
+
+  handlePropValueChange(propValue) {
+    this._setValue(propValue);
+  }
+
+  _setValue(value) {
+    this._adapter.setValue(value);
+  } // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  destroy() {}
+
+}

package/lib/es/radio/radioInnerFoundation.d.ts

@@ -0,0 +1,22 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface RadioChangeEvent {
+    target: {
+        [x: string]: any;
+        checked: boolean;
+        value: any;
+    };
+    stopPropagation: () => void;
+    preventDefault: () => void;
+}
+export interface RadioInnerAdapter extends DefaultAdapter {
+    notifyChange?: (e: RadioChangeEvent) => void;
+    setNativeControlChecked?: (checked: boolean) => void;
+}
+export default class RadioInnerFoundation extends BaseFoundation<RadioInnerAdapter> {
+    constructor(adapter: RadioInnerAdapter);
+    init(): void;
+    setChecked(checked: boolean): void;
+    getChecked(): any;
+    handleChange(e: any): void;
+    destroy(): void;
+}

package/lib/es/radio/radioInnerFoundation.js

@@ -0,0 +1,57 @@
+import BaseFoundation from '../base/foundation';
+export default class RadioInnerFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  }
+
+  init() {
+    const checked = this._adapter.getProp('checked');
+
+    const defaultChecked = this._adapter.getProp('defaultChecked');
+
+    this.setChecked(checked || defaultChecked);
+  }
+
+  setChecked(checked) {
+    this._adapter.setNativeControlChecked(checked);
+  }
+
+  getChecked() {
+    return this._adapter.getProp('checked');
+  }
+
+  handleChange(e) {
+    const isControlledMode = ('checked' in this.getProps());
+    const {
+      checked
+    } = e.target;
+
+    const stopPropagation = () => {
+      e.stopPropagation();
+    };
+
+    const preventDefault = () => {
+      e.preventDefault();
+    };
+
+    const cbValue = {
+      target: Object.assign(Object.assign({}, this.getProps()), {
+        checked
+      }),
+      stopPropagation,
+      preventDefault
+    };
+
+    if (isControlledMode) {
+      this._adapter.notifyChange(cbValue);
+    } else {
+      this.setChecked(checked);
+
+      this._adapter.notifyChange(cbValue);
+    }
+  } // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  destroy() {}
+
+}

package/lib/es/rating/constants.d.ts

@@ -0,0 +1,7 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    readonly SIZE_SET: readonly ["default", "small"];
+};
+export { cssClasses, strings };

package/lib/es/rating/constants.js

@@ -0,0 +1,8 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-rating`
+};
+const strings = {
+  SIZE_SET: ['default', 'small']
+};
+export { cssClasses, strings };

package/lib/es/rating/foundation.d.ts

@@ -0,0 +1,41 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface RatingAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    focus: () => void;
+    getStarDOM: (index: number) => Element;
+    notifyHoverChange: (hoverValue: number, clearedValue: number) => void;
+    updateValue: (value: number) => void;
+    clearValue: (clearedValue: number) => void;
+    notifyFocus: (e: any) => void;
+    notifyBlur: (e: any) => void;
+    notifyKeyDown: (e: any) => void;
+    setEmptyStarFocusVisible: (focusVisible: boolean) => void;
+}
+export default class RatingFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<RatingAdapter<P, S>, P, S> {
+    constructor(adapter: RatingAdapter<P, S>);
+    init(): void;
+    _getScroll(w: Window, top?: boolean): number;
+    _getClientPosition(elem: Element): {
+        left: any;
+        top: any;
+    };
+    _getOffsetLeft(el: Element): any;
+    getStarValue(index: number, pos: number): number;
+    handleHover(event: any, index: number): void;
+    handleMouseLeave(): void;
+    handleClick(event: any, index: number): void;
+    handleFocus(e: any): void;
+    handleBlur(e: any): void;
+    handleKeyDown(event: any, value: number): void;
+    changeFocusStar(value: number, event: any): void;
+    handleStarFocusVisible: (event: any) => void;
+    handleStarBlur: (e: any) => void;
+}
+export interface RatingItemAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    setFirstStarFocus: (value: boolean) => void;
+    setSecondStarFocus: (value: boolean) => void;
+}
+export declare class RatingItemFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<RatingItemAdapter<P, S>, P, S> {
+    constructor(adapter: RatingItemAdapter<P, S>);
+    handleFocusVisible: (event: any, star: string) => void;
+    handleBlur: (e: any, star: string) => void;
+}