first

examples/components/theme-configurator/utils/boxShadow.js

@@ -0,0 +1,59 @@
+const VALUES_REG = /,(?![^\(]*\))/;
+const PARTS_REG = /\s(?![^(]*\))/;
+const LENGTH_REG = /^[0-9]+[a-zA-Z%]+?$/;
+
+const parseValue = str => {
+  const parts = str.split(PARTS_REG);
+  const inset = parts.includes('inset');
+  const last = parts.slice(-1)[0];
+  const color = !isLength(last) ? last : undefined;
+
+  const nums = parts
+    .filter(n => n !== 'inset')
+    .filter(n => n !== color)
+    .map(toNum);
+  const [ offsetX, offsetY, blurRadius, spreadRadius ] = nums;
+
+  return {
+    inset,
+    offsetX,
+    offsetY,
+    blurRadius,
+    spreadRadius,
+    color
+  };
+};
+
+const stringifyValue = obj => {
+  const {
+    inset,
+    offsetX = 0,
+    offsetY = 0,
+    blurRadius = 0,
+    spreadRadius,
+    color
+  } = obj || {};
+
+  return [
+    (inset ? 'inset' : null),
+    offsetX,
+    offsetY,
+    blurRadius,
+    spreadRadius,
+    color
+  ].filter(v => v !== null && v !== undefined)
+    .map(toPx)
+    .map(s => ('' + s).trim())
+    .join(' ');
+};
+
+const isLength = v => v === '0' || LENGTH_REG.test(v);
+const toNum = v => {
+  if (!/px$/.test(v) && v !== '0') return v;
+  const n = parseFloat(v);
+  return !isNaN(n) ? n : v;
+};
+const toPx = n => typeof n === 'number' && n !== 0 ? (n + 'px') : n;
+
+export const parse = str => str.split(VALUES_REG).map(s => s.trim()).map(parseValue);
+export const stringify = arr => arr.map(stringifyValue).join(', ');

examples/components/theme-configurator/utils/utils.js

@@ -0,0 +1,68 @@
+import deepmerge from 'deepmerge';
+import constant from '../../../i18n/theme-editor.json';
+
+export const filterConfigType = (name) => {
+  switch (name) {
+    case 'color':
+    case 'typography':
+    case 'border':
+      return 'global';
+    default:
+      return 'local';
+  }
+};
+
+export const filterGlobalValue = (defaultConfig, userConfig) => {
+  const valueObject = {};
+  const globalArr = ['color', 'typography', 'border'];
+  globalArr.forEach((global) => {
+    const configObj = {};
+    defaultConfig
+      .find(config => (config.name === global))
+      .config.forEach(c => (configObj[c.key] = deepmerge({}, c)));
+    valueObject[global] = configObj;
+    Object.keys(configObj).forEach((c) => {
+      if (userConfig.global[c]) {
+        configObj[c].value = userConfig.global[c];
+      }
+    });
+  });
+  return valueObject;
+};
+
+export const getStyleDisplayValue = (displayValue, global) => {
+  if (displayValue.startsWith('$')) {
+    return global[displayValue].value;
+  }
+  return displayValue;
+};
+
+const getLang = () => {
+  return location.hash.replace('#', '').split('/')[1] || 'zh-CN';
+};
+
+const getNameFromI18N = (name) => {
+  const lang = getLang();
+  return constant.filter(config => config.lang === lang)[0][name];
+};
+
+export const getVariableDisplayName = (key) => {
+  return getNameFromI18N('variable-name')[key] || key;
+};
+
+export const getStyleDisplayName = (config, componentName) => {
+  const displayNameMap = getNameFromI18N('display-name');
+  if (config.name) {
+    return getVariableDisplayName(config.key.replace('$--', ''));
+  }
+  let displayName = config.key.replace(`$--${componentName}-`, '');
+  Object.keys(displayNameMap).forEach((name) => {
+    displayName = displayName.replace(name, displayNameMap[name]);
+  });
+  displayName = displayName.replace(/-/g, ' ');
+  return displayName.trim();
+};
+
+export const getActionDisplayName = (key) => {
+  return getNameFromI18N('action')[key] || key;
+};