BVB Source Codes

react-sketchapp Show index.js Source code

Return Download react-sketchapp: download index.js Source code - Download react-sketchapp Source code - Type:.js
  1. import expandStyle from './expandStyle';
  2.  
  3. const hasOwnProperty = Object.prototype.hasOwnProperty;
  4.  
  5. let _id = 0;
  6. // eslint-disable-next-line no-plusplus
  7. const guid = () => _id++;
  8. const declarationRegistry = {};
  9.  
  10. const extractRules = (style) => {
  11.   const declarations = {};
  12.  
  13.   Object.keys(style).forEach((key) => {
  14.     if (key[0] === ':') {
  15.       // pseudo style. ignore for now.
  16.     } else if (key[0] === '@') {
  17.       // Media query. ignore for now.
  18.     } else {
  19.       declarations[key] = style[key];
  20.     }
  21.   });
  22.  
  23.   return {
  24.     declarations,
  25.   };
  26. };
  27.  
  28. const registerStyle = (style) => {
  29.   // TODO(lmr):
  30.   // do "proptype"-like validation here in non-production build
  31.   const id = guid();
  32.   const rules = extractRules(style);
  33.   declarationRegistry[id] = expandStyle(rules.declarations);
  34.   return id;
  35. };
  36.  
  37. const getStyle = id => declarationRegistry[id];
  38.  
  39. const create = (styles) => {
  40.   const result = {};
  41.   Object.keys(styles).forEach((key) => {
  42.     result[key] = registerStyle(styles[key]);
  43.   });
  44.   return result;
  45. };
  46.  
  47. const mergeTransforms = (a, b) => {
  48.   if (!a || a.length === 0) return b; // in this case, a has nothing to contribute.
  49.   const result = [];
  50.   const transformsInA = a.reduce(
  51.     (hash, t) => {
  52.       const key = Object.keys(t)[0];
  53.       result.push(t);
  54.       hash[key] = result.length - 1;
  55.       return hash;
  56.     },
  57.     {},
  58.   );
  59.   b.forEach((t) => {
  60.     const key = Object.keys(t)[0];
  61.     const index = transformsInA[key];
  62.     if (index !== undefined) {
  63.       result[index] = t;
  64.     } else {
  65.       result.push(t);
  66.     }
  67.   });
  68.   return result;
  69. };
  70.  
  71. // merge two style hashes together. Sort of like `Object.assign`, but is aware of `transform` as a
  72. // special case.
  73. // NOTE(lmr): mutates the first argument!
  74. const mergeStyle = (a, b) => {
  75.   let key;
  76.   // eslint-disable-next-line no-restricted-syntax
  77.   for (key in b) {
  78.     if (hasOwnProperty.call(b, key)) {
  79.       switch (key) {
  80.         case 'transform':
  81.           a[key] = mergeTransforms(a[key], b[key]);
  82.           break;
  83.         default:
  84.           /* eslint no-param-reassign: 0 */
  85.           a[key] = b[key];
  86.           break;
  87.       }
  88.     }
  89.   }
  90.   return a;
  91. };
  92.  
  93. const flattenStyle = (input) => {
  94.   if (Array.isArray(input)) {
  95.     return input.reduce((acc, val) => mergeStyle(acc, flattenStyle(val)), {});
  96.   } else if (typeof input === 'number') {
  97.     return getStyle(input);
  98.   } else if (!input) {
  99.     // input is falsy, so we skip it by returning undefined
  100.     return undefined;
  101.   }
  102.   return expandStyle(input);
  103. };
  104.  
  105. /**
  106.  * A StyleSheet is an abstraction similar to CSS StyleSheets. WIP.
  107.  */
  108. const StyleSheet = {
  109.   hairlineWidth: 1, // TODO(lmr): should this be something different?
  110.   absoluteFill: registerStyle({
  111.     position: 'absolute',
  112.     top: 0,
  113.     left: 0,
  114.     bottom: 0,
  115.     right: 0,
  116.   }),
  117.   create,
  118.   flatten: flattenStyle,
  119.   resolve: style => ({ style: flattenStyle(style) }),
  120. };
  121.  
  122. module.exports = StyleSheet;
  123.  
downloadindex.js Source code - Download react-sketchapp Source code
Related Source Codes/Software:
yoga - Yoga is a cross-platform layout engine which imple... 2017-06-05
bash-guide - A guide to learn bash 2017-06-05
N-blog - Learn the Node together. J 2017-06-05
Become-A-Full-Stack-Web-Developer - Free resources for learning Full Stack Web Develop... 2017-06-05
compromise - Natural language processing in javascript ... 2017-06-05
jquery-validation - jQuery Validation Plugin library sources ... 2017-06-05
mithril.js - A Javascript Framework for Building Brilliant Appl... 2017-06-05
localstack - A fully functional local AWS cloud stack. Develop ... 2017-06-05
vue2-elm - Based on vue2 + vuex to build a large single-page ... 2017-06-05
CRYENGINE - CRYENGINE is a powerful real-time game development... 2017-06-11
postal - 2017-06-11
reactide - Reactide is the first dedicated IDE for React web ... 2017-06-11
rkt - rkt is a pod-native container engine for Linux. It... 2017-06-11
uWebSockets - Tiny WebSockets https://for... 2017-06-11
realworld - TodoMVC for the RealWorld - Exemplary fullstack Me... 2017-06-11
goreplay - GoReplay is an open-source tool for capturing and ... 2017-06-10
pyenv - Simple Python version management 2017-06-10
redux-saga - An alternative side effect model for Redux apps ... 2017-06-10
angular-starter - 2017-06-10

 Back to top