Add lib folder
Javi Velasco
parent
115e839086
commit
7b806214a2
|
|
@ -1,5 +1,4 @@
|
|||
build
|
||||
lib
|
||||
node_modules
|
||||
npm-debug.log
|
||||
.idea
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
@import "./colors";
|
||||
@import "./globals";
|
||||
@import "./mixins";
|
||||
|
|
@ -0,0 +1,301 @@
|
|||
//-- Color definitions taken from Material Design Lite
|
||||
|
||||
// Red
|
||||
$palette-red-50: rgb(255,235,238);
|
||||
$palette-red-100: rgb(255,205,210);
|
||||
$palette-red-200: rgb(239,154,154);
|
||||
$palette-red-300: rgb(229,115,115);
|
||||
$palette-red-400: rgb(239,83,80);
|
||||
$palette-red-500: rgb(244,67,54);
|
||||
$palette-red-600: rgb(229,57,53);
|
||||
$palette-red-700: rgb(211,47,47);
|
||||
$palette-red-800: rgb(198,40,40);
|
||||
$palette-red-900: rgb(183,28,28);
|
||||
$palette-red-a100: rgb(255,138,128);
|
||||
$palette-red-a200: rgb(255,82,82);
|
||||
$palette-red-a400: rgb(255,23,68);
|
||||
$palette-red-a700: rgb(213,0,0);
|
||||
|
||||
// Pink
|
||||
$palette-pink-50: rgb(252,228,236);
|
||||
$palette-pink-100: rgb(248,187,208);
|
||||
$palette-pink-200: rgb(244,143,177);
|
||||
$palette-pink-300: rgb(240,98,146);
|
||||
$palette-pink-400: rgb(236,64,122);
|
||||
$palette-pink-500: rgb(233,30,99);
|
||||
$palette-pink-600: rgb(216,27,96);
|
||||
$palette-pink-700: rgb(194,24,91);
|
||||
$palette-pink-800: rgb(173,20,87);
|
||||
$palette-pink-900: rgb(136,14,79);
|
||||
$palette-pink-a100: rgb(255,128,171);
|
||||
$palette-pink-a200: rgb(255,64,129);
|
||||
$palette-pink-a400: rgb(245,0,87);
|
||||
$palette-pink-a700: rgb(197,17,98);
|
||||
|
||||
// Purple
|
||||
$palette-purple-50: rgb(243,229,245);
|
||||
$palette-purple-100: rgb(225,190,231);
|
||||
$palette-purple-200: rgb(206,147,216);
|
||||
$palette-purple-300: rgb(186,104,200);
|
||||
$palette-purple-400: rgb(171,71,188);
|
||||
$palette-purple-500: rgb(156,39,176);
|
||||
$palette-purple-600: rgb(142,36,170);
|
||||
$palette-purple-700: rgb(123,31,162);
|
||||
$palette-purple-800: rgb(106,27,154);
|
||||
$palette-purple-900: rgb(74,20,140);
|
||||
$palette-purple-a100: rgb(234,128,252);
|
||||
$palette-purple-a200: rgb(224,64,251);
|
||||
$palette-purple-a400: rgb(213,0,249);
|
||||
$palette-purple-a700: rgb(170,0,255);
|
||||
|
||||
//Deep Purple
|
||||
$palette-deep-purple-50: rgb(237,231,246);
|
||||
$palette-deep-purple-100: rgb(209,196,233);
|
||||
$palette-deep-purple-200: rgb(179,157,219);
|
||||
$palette-deep-purple-300: rgb(149,117,205);
|
||||
$palette-deep-purple-400: rgb(126,87,194);
|
||||
$palette-deep-purple-500: rgb(103,58,183);
|
||||
$palette-deep-purple-600: rgb(94,53,177);
|
||||
$palette-deep-purple-700: rgb(81,45,168);
|
||||
$palette-deep-purple-800: rgb(69,39,160);
|
||||
$palette-deep-purple-900: rgb(49,27,146);
|
||||
$palette-deep-purple-a100: rgb(179,136,255);
|
||||
$palette-deep-purple-a200: rgb(124,77,255);
|
||||
$palette-deep-purple-a400: rgb(101,31,255);
|
||||
$palette-deep-purple-a700: rgb(98,0,234);
|
||||
|
||||
// Indigo
|
||||
$palette-indigo-50: rgb(232,234,246);
|
||||
$palette-indigo-100: rgb(197,202,233);
|
||||
$palette-indigo-200: rgb(159,168,218);
|
||||
$palette-indigo-300: rgb(121,134,203);
|
||||
$palette-indigo-400: rgb(92,107,192);
|
||||
$palette-indigo-500: rgb(63,81,181);
|
||||
$palette-indigo-600: rgb(57,73,171);
|
||||
$palette-indigo-700: rgb(48,63,159);
|
||||
$palette-indigo-800: rgb(40,53,147);
|
||||
$palette-indigo-900: rgb(26,35,126);
|
||||
$palette-indigo-a100: rgb(140,158,255);
|
||||
$palette-indigo-a200: rgb(83,109,254);
|
||||
$palette-indigo-a400: rgb(61,90,254);
|
||||
$palette-indigo-a700: rgb(48,79,254);
|
||||
|
||||
// Blue
|
||||
$palette-blue-50: rgb(227,242,253);
|
||||
$palette-blue-100: rgb(187,222,251);
|
||||
$palette-blue-200: rgb(144,202,249);
|
||||
$palette-blue-300: rgb(100,181,246);
|
||||
$palette-blue-400: rgb(66,165,245);
|
||||
$palette-blue-500: rgb(33,150,243);
|
||||
$palette-blue-600: rgb(30,136,229);
|
||||
$palette-blue-700: rgb(25,118,210);
|
||||
$palette-blue-800: rgb(21,101,192);
|
||||
$palette-blue-900: rgb(13,71,161);
|
||||
$palette-blue-a100: rgb(130,177,255);
|
||||
$palette-blue-a200: rgb(68,138,255);
|
||||
$palette-blue-a400: rgb(41,121,255);
|
||||
$palette-blue-a700: rgb(41,98,255);
|
||||
|
||||
// Light Blue
|
||||
$palette-light-blue-50: rgb(225,245,254);
|
||||
$palette-light-blue-100: rgb(179,229,252);
|
||||
$palette-light-blue-200: rgb(129,212,250);
|
||||
$palette-light-blue-300: rgb(79,195,247);
|
||||
$palette-light-blue-400: rgb(41,182,246);
|
||||
$palette-light-blue-500: rgb(3,169,244);
|
||||
$palette-light-blue-600: rgb(3,155,229);
|
||||
$palette-light-blue-700: rgb(2,136,209);
|
||||
$palette-light-blue-800: rgb(2,119,189);
|
||||
$palette-light-blue-900: rgb(1,87,155);
|
||||
$palette-light-blue-a100: rgb(128,216,255);
|
||||
$palette-light-blue-a200: rgb(64,196,255);
|
||||
$palette-light-blue-a400: rgb(0,176,255);
|
||||
$palette-light-blue-a700: rgb(0,145,234);
|
||||
|
||||
// Cyan
|
||||
$palette-cyan-50: rgb(224,247,250);
|
||||
$palette-cyan-100: rgb(178,235,242);
|
||||
$palette-cyan-200: rgb(128,222,234);
|
||||
$palette-cyan-300: rgb(77,208,225);
|
||||
$palette-cyan-400: rgb(38,198,218);
|
||||
$palette-cyan-500: rgb(0,188,212);
|
||||
$palette-cyan-600: rgb(0,172,193);
|
||||
$palette-cyan-700: rgb(0,151,167);
|
||||
$palette-cyan-800: rgb(0,131,143);
|
||||
$palette-cyan-900: rgb(0,96,100);
|
||||
$palette-cyan-a100: rgb(132,255,255);
|
||||
$palette-cyan-a200: rgb(24,255,255);
|
||||
$palette-cyan-a400: rgb(0,229,255);
|
||||
$palette-cyan-a700: rgb(0,184,212);
|
||||
|
||||
// Teal
|
||||
$palette-teal-50: rgb(224,242,241);
|
||||
$palette-teal-100: rgb(178,223,219);
|
||||
$palette-teal-200: rgb(128,203,196);
|
||||
$palette-teal-300: rgb(77,182,172);
|
||||
$palette-teal-400: rgb(38,166,154);
|
||||
$palette-teal-500: rgb(0,150,136);
|
||||
$palette-teal-600: rgb(0,137,123);
|
||||
$palette-teal-700: rgb(0,121,107);
|
||||
$palette-teal-800: rgb(0,105,92);
|
||||
$palette-teal-900: rgb(0,77,64);
|
||||
$palette-teal-a100: rgb(167,255,235);
|
||||
$palette-teal-a200: rgb(100,255,218);
|
||||
$palette-teal-a400: rgb(29,233,182);
|
||||
$palette-teal-a700: rgb(0,191,165);
|
||||
|
||||
// Green
|
||||
$palette-green-50: rgb(232,245,233);
|
||||
$palette-green-100: rgb(200,230,201);
|
||||
$palette-green-200: rgb(165,214,167);
|
||||
$palette-green-300: rgb(129,199,132);
|
||||
$palette-green-400: rgb(102,187,106);
|
||||
$palette-green-500: rgb(76,175,80);
|
||||
$palette-green-600: rgb(67,160,71);
|
||||
$palette-green-700: rgb(56,142,60);
|
||||
$palette-green-800: rgb(46,125,50);
|
||||
$palette-green-900: rgb(27,94,32);
|
||||
$palette-green-a100: rgb(185,246,202);
|
||||
$palette-green-a200: rgb(105,240,174);
|
||||
$palette-green-a400: rgb(0,230,118);
|
||||
$palette-green-a700: rgb(0,200,83);
|
||||
|
||||
// Green
|
||||
$palette-light-green-50: rgb(241,248,233);
|
||||
$palette-light-green-100: rgb(220,237,200);
|
||||
$palette-light-green-200: rgb(197,225,165);
|
||||
$palette-light-green-300: rgb(174,213,129);
|
||||
$palette-light-green-400: rgb(156,204,101);
|
||||
$palette-light-green-500: rgb(139,195,74);
|
||||
$palette-light-green-600: rgb(124,179,66);
|
||||
$palette-light-green-700: rgb(104,159,56);
|
||||
$palette-light-green-800: rgb(85,139,47);
|
||||
$palette-light-green-900: rgb(51,105,30);
|
||||
$palette-light-green-a100: rgb(204,255,144);
|
||||
$palette-light-green-a200: rgb(178,255,89);
|
||||
$palette-light-green-a400: rgb(118,255,3);
|
||||
$palette-light-green-a700: rgb(100,221,23);
|
||||
|
||||
// Lime
|
||||
$palette-lime-50: rgb(249,251,231);
|
||||
$palette-lime-100: rgb(240,244,195);
|
||||
$palette-lime-200: rgb(230,238,156);
|
||||
$palette-lime-300: rgb(220,231,117);
|
||||
$palette-lime-400: rgb(212,225,87);
|
||||
$palette-lime-500: rgb(205,220,57);
|
||||
$palette-lime-600: rgb(192,202,51);
|
||||
$palette-lime-700: rgb(175,180,43);
|
||||
$palette-lime-800: rgb(158,157,36);
|
||||
$palette-lime-900: rgb(130,119,23);
|
||||
$palette-lime-a100: rgb(244,255,129);
|
||||
$palette-lime-a200: rgb(238,255,65);
|
||||
$palette-lime-a400: rgb(198,255,0);
|
||||
$palette-lime-a700: rgb(174,234,0);
|
||||
|
||||
// Yellow
|
||||
$palette-yellow-50: rgb(255,253,231);
|
||||
$palette-yellow-100: rgb(255,249,196);
|
||||
$palette-yellow-200: rgb(255,245,157);
|
||||
$palette-yellow-300: rgb(255,241,118);
|
||||
$palette-yellow-400: rgb(255,238,88);
|
||||
$palette-yellow-500: rgb(255,235,59);
|
||||
$palette-yellow-600: rgb(253,216,53);
|
||||
$palette-yellow-700: rgb(251,192,45);
|
||||
$palette-yellow-800: rgb(249,168,37);
|
||||
$palette-yellow-900: rgb(245,127,23);
|
||||
$palette-yellow-a100: rgb(255,255,141);
|
||||
$palette-yellow-a200: rgb(255,255,0);
|
||||
$palette-yellow-a400: rgb(255,234,0);
|
||||
$palette-yellow-a700: rgb(255,214,0);
|
||||
|
||||
// Amber
|
||||
$palette-amber-50: rgb(255,248,225);
|
||||
$palette-amber-100: rgb(255,236,179);
|
||||
$palette-amber-200: rgb(255,224,130);
|
||||
$palette-amber-300: rgb(255,213,79);
|
||||
$palette-amber-400: rgb(255,202,40);
|
||||
$palette-amber-500: rgb(255,193,7);
|
||||
$palette-amber-600: rgb(255,179,0);
|
||||
$palette-amber-700: rgb(255,160,0);
|
||||
$palette-amber-800: rgb(255,143,0);
|
||||
$palette-amber-900: rgb(255,111,0);
|
||||
$palette-amber-a100: rgb(255,229,127);
|
||||
$palette-amber-a200: rgb(255,215,64);
|
||||
$palette-amber-a400: rgb(255,196,0);
|
||||
$palette-amber-a700: rgb(255,171,0);
|
||||
|
||||
// Orange
|
||||
$palette-orange-50: rgb(255,243,224);
|
||||
$palette-orange-100: rgb(255,224,178);
|
||||
$palette-orange-200: rgb(255,204,128);
|
||||
$palette-orange-300: rgb(255,183,77);
|
||||
$palette-orange-400: rgb(255,167,38);
|
||||
$palette-orange-500: rgb(255,152,0);
|
||||
$palette-orange-600: rgb(251,140,0);
|
||||
$palette-orange-700: rgb(245,124,0);
|
||||
$palette-orange-800: rgb(239,108,0);
|
||||
$palette-orange-900: rgb(230,81,0);
|
||||
$palette-orange-a100: rgb(255,209,128);
|
||||
$palette-orange-a200: rgb(255,171,64);
|
||||
$palette-orange-a400: rgb(255,145,0);
|
||||
$palette-orange-a700: rgb(255,109,0);
|
||||
|
||||
// Deep Orange
|
||||
$palette-deep-orange-50: rgb(251,233,231);
|
||||
$palette-deep-orange-100: rgb(255,204,188);
|
||||
$palette-deep-orange-200: rgb(255,171,145);
|
||||
$palette-deep-orange-300: rgb(255,138,101);
|
||||
$palette-deep-orange-400: rgb(255,112,67);
|
||||
$palette-deep-orange-500: rgb(255,87,34);
|
||||
$palette-deep-orange-600: rgb(244,81,30);
|
||||
$palette-deep-orange-700: rgb(230,74,25);
|
||||
$palette-deep-orange-800: rgb(216,67,21);
|
||||
$palette-deep-orange-900: rgb(191,54,12);
|
||||
$palette-deep-orange-a100: rgb(255,158,128);
|
||||
$palette-deep-orange-a200: rgb(255,110,64);
|
||||
$palette-deep-orange-a400: rgb(255,61,0);
|
||||
$palette-deep-orange-a700: rgb(221,44,0);
|
||||
|
||||
// Brown
|
||||
$palette-brown-50: rgb(239,235,233);
|
||||
$palette-brown-100: rgb(215,204,200);
|
||||
$palette-brown-200: rgb(188,170,164);
|
||||
$palette-brown-300: rgb(161,136,127);
|
||||
$palette-brown-400: rgb(141,110,99);
|
||||
$palette-brown-500: rgb(121,85,72);
|
||||
$palette-brown-600: rgb(109,76,65);
|
||||
$palette-brown-700: rgb(93,64,55);
|
||||
$palette-brown-800: rgb(78,52,46);
|
||||
$palette-brown-900: rgb(62,39,35);
|
||||
|
||||
// Grey
|
||||
$palette-grey-50: rgb(250,250,250);
|
||||
$palette-grey-100: rgb(245,245,245);
|
||||
$palette-grey-200: rgb(238,238,238);
|
||||
$palette-grey-300: rgb(224,224,224);
|
||||
$palette-grey-400: rgb(189,189,189);
|
||||
$palette-grey-500: rgb(158,158,158);
|
||||
$palette-grey-600: rgb(117,117,117);
|
||||
$palette-grey-700: rgb(97,97,97);
|
||||
$palette-grey-800: rgb(66,66,66);
|
||||
$palette-grey-900: rgb(33,33,33);
|
||||
|
||||
// Blue Grey
|
||||
$palette-blue-grey-50: rgb(236,239,241);
|
||||
$palette-blue-grey-100: rgb(207,216,220);
|
||||
$palette-blue-grey-200: rgb(176,190,197);
|
||||
$palette-blue-grey-300: rgb(144,164,174);
|
||||
$palette-blue-grey-400: rgb(120,144,156);
|
||||
$palette-blue-grey-500: rgb(96,125,139);
|
||||
$palette-blue-grey-600: rgb(84,110,122);
|
||||
$palette-blue-grey-700: rgb(69,90,100);
|
||||
$palette-blue-grey-800: rgb(55,71,79);
|
||||
$palette-blue-grey-900: rgb(38,50,56);
|
||||
|
||||
$color-black: rgb(0,0,0);
|
||||
$color-white: rgb(255,255,255);
|
||||
|
||||
//-- The two possible colors for overlayed text.
|
||||
$styleguide-generate-template: false !default;
|
||||
$color-dark-contrast: $color-white !default;
|
||||
$color-light-contrast: $color-black !default;
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
//-- Color configuration
|
||||
$color-divider: $palette-grey-200 !default;
|
||||
$color-background: $color-white !default;
|
||||
$color-text: $palette-grey-900 !default;
|
||||
$color-text-secondary: $palette-grey-600 !default;
|
||||
|
||||
$color-primary: $palette-indigo-500 !default;
|
||||
$color-primary-dark: $palette-indigo-700 !default;
|
||||
$color-accent: $palette-pink-a200 !default;
|
||||
$color-accent-dark: $palette-pink-700 !default;
|
||||
$color-primary-contrast: $color-dark-contrast !default;
|
||||
$color-accent-contrast: $color-dark-contrast !default;
|
||||
|
||||
//-- Sizing
|
||||
$unit: 1rem !default;
|
||||
|
||||
// -- Fonts
|
||||
$preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
|
||||
$font-size: 1.6 * $unit !default;
|
||||
$font-size-tiny: 1.2 * $unit !default;
|
||||
$font-size-small: 1.4 * $unit !default;
|
||||
$font-size-normal: $font-size !default;
|
||||
$font-size-big: 1.8 * $unit !default;
|
||||
$font-weight-thin: 300 !default;
|
||||
$font-weight-normal: 400 !default;
|
||||
$font-weight-semi-bold: 500 !default;
|
||||
$font-weight-bold: 700 !default;
|
||||
|
||||
//-- Shadows
|
||||
$shadow-key-umbra-opacity: 0.2 !default;
|
||||
$shadow-key-penumbra-opacity: 0.14 !default;
|
||||
$shadow-ambient-shadow-opacity: 0.12 !default;
|
||||
|
||||
//-- Depth Shadows
|
||||
$zdepth-shadow-1: 0 1px 6px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.24);
|
||||
$zdepth-shadow-2: 0 3px 10px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.23);
|
||||
$zdepth-shadow-3: 0 10px 30px rgba(0,0,0,.19), 0 6px 10px rgba(0,0,0,.23);
|
||||
$zdepth-shadow-4: 0 14px 45px rgba(0,0,0,.25), 0 10px 18px rgba(0,0,0,.22);
|
||||
$zdepth-shadow-5: 0 19px 60px rgba(0,0,0,.3), 0 15px 20px rgba(0,0,0,.22);
|
||||
|
||||
//-- Animation
|
||||
$animation-duration: .35s;
|
||||
$animation-delay: $animation-duration / 5;
|
||||
$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
|
||||
$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
|
||||
$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
|
||||
$animation-curve-default: $animation-curve-fast-out-slow-in !default;
|
||||
|
||||
//-- Indexes
|
||||
$z-index-highest: 300 !default;
|
||||
$z-index-higher: 200 !default;
|
||||
$z-index-high: 100 !default;
|
||||
$z-index-normal: 1 !default;
|
||||
$z-index-low: -100 !default;
|
||||
$z-index-lower: -200 !default;
|
||||
|
||||
//-- Breakpoints
|
||||
// height of app bar
|
||||
// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
|
||||
$standard-increment-mobile: (5.6 * $unit) !default;
|
||||
$standard-increment-desktop: (6.4 * $unit) !default;
|
||||
|
||||
// https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-baseline-grids
|
||||
$baseline-grid: (0.8 * $unit) !default;
|
||||
$layout-gutter-width-sm: ($baseline-grid * 2) !default;
|
||||
$layout-gutter-width: ($baseline-grid * 3) !default;
|
||||
|
||||
// https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints
|
||||
// 4 columns
|
||||
$layout-breakpoint-xxs: 480px !default;
|
||||
// 8 columns
|
||||
$layout-breakpoint-xs: 600px !default;
|
||||
// 12 columns
|
||||
$layout-breakpoint-sm-tablet: 720px !default;
|
||||
$layout-breakpoint-sm: 840px !default;
|
||||
$layout-breakpoint-md: 960px !default;
|
||||
$layout-breakpoint-lg-tablet: 1024px !default;
|
||||
$layout-breakpoint-lg: 1280px !default;
|
||||
$layout-breakpoint-xl: 1440px !default;
|
||||
$layout-breakpoint-xxl: 1600px !default;
|
||||
$layout-breakpoint-xxxl: 1920px !default;
|
||||
|
|
@ -0,0 +1,278 @@
|
|||
// scss-lint:disable VendorPrefix
|
||||
@mixin typo-preferred-font($use-preferred: true) {
|
||||
@if $use-preferred {
|
||||
font-family: $preferred-font;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-4($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: 11.2rem;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
letter-spacing: -.04em;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-3($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: 5.6rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -.02em;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-2($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: 4.5rem;
|
||||
font-weight: 400;
|
||||
line-height: 4.8rem;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-1($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: 3.4rem;
|
||||
font-weight: 400;
|
||||
line-height: 4rem;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-headline($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: 2.4rem;
|
||||
font-weight: 400;
|
||||
line-height: 3.2rem;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-title($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: .02em;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-subhead($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
line-height: 2.4rem;
|
||||
letter-spacing: .04em;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-subhead-2($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
line-height: 2.8rem;
|
||||
letter-spacing: .04em;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-body-2($color-contrast: false, $use-preferred: false) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.4rem;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $use-preferred {
|
||||
font-weight: 500;
|
||||
} @else {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-body-1($color-contrast: false, $use-preferred: false) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
line-height: 2.4rem;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-caption($color-contrast: false, $use-preferred: false) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-blockquote($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
position: relative;
|
||||
font-size: 2.4rem;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
line-height: 1.35;
|
||||
letter-spacing: .08em;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: -.5em;
|
||||
content: "“";
|
||||
}
|
||||
|
||||
&:after {
|
||||
margin-left: -.05em;
|
||||
content: "”";
|
||||
}
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-menu($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .87;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-button($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .87;
|
||||
}
|
||||
}
|
||||
|
||||
//-- Shadows
|
||||
@mixin focus-shadow() {
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36);
|
||||
}
|
||||
|
||||
@mixin shadow-2dp() {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
|
||||
0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-3dp() {
|
||||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
|
||||
0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-4dp() {
|
||||
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-6dp() {
|
||||
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-8dp() {
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-16dp() {
|
||||
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
||||
0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
||||
0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
//-- Animations
|
||||
@mixin material-animation-fast-out-slow-in($duration: .2s) {
|
||||
transition-timing-function: $animation-curve-fast-out-slow-in;
|
||||
transition-duration: $duration;
|
||||
}
|
||||
|
||||
@mixin material-animation-linear-out-slow-in($duration: .2s) {
|
||||
transition-timing-function: $animation-curve-linear-out-slow-in;
|
||||
transition-duration: $duration;
|
||||
}
|
||||
|
||||
@mixin material-animation-fast-out-linear-in($duration: .2s) {
|
||||
transition-timing-function: $animation-curve-fast-out-linear-in;
|
||||
transition-duration: $duration;
|
||||
}
|
||||
|
||||
@mixin material-animation-default($duration: .2s) {
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $duration;
|
||||
}
|
||||
|
||||
@mixin no-webkit-scrollbar {
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btn-colors($name, $color, $background, $hover) {
|
||||
.#{$name}:not([disabled]) {
|
||||
&.raised, &.floating {
|
||||
color: $color;
|
||||
background: $background;
|
||||
}
|
||||
&.flat, &.toggle {
|
||||
color: $background;
|
||||
&:focus:not(:active) {
|
||||
background: $hover;
|
||||
}
|
||||
}
|
||||
&.flat:hover {
|
||||
background: $hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.ZoomOut = exports.ZoomIn = exports.SlideRight = exports.SlideLeft = undefined;
|
||||
|
||||
var _slideLeft = require('./slide-left.scss');
|
||||
|
||||
var _slideLeft2 = _interopRequireDefault(_slideLeft);
|
||||
|
||||
var _slideRight = require('./slide-right.scss');
|
||||
|
||||
var _slideRight2 = _interopRequireDefault(_slideRight);
|
||||
|
||||
var _zoomIn = require('./zoom-in.scss');
|
||||
|
||||
var _zoomIn2 = _interopRequireDefault(_zoomIn);
|
||||
|
||||
var _zoomOut = require('./zoom-out.scss');
|
||||
|
||||
var _zoomOut2 = _interopRequireDefault(_zoomOut);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
exports.SlideLeft = _slideLeft2.default;
|
||||
exports.SlideRight = _slideRight2.default;
|
||||
exports.ZoomIn = _zoomIn2.default;
|
||||
exports.ZoomOut = _zoomOut2.default;
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
.enter, .leave {
|
||||
position: absolute;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: .35s;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
|
||||
.enter {
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
|
||||
&.enterActive {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.leave {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
&.leaveActive {
|
||||
opacity: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
.enter, .leave {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.enterActive, .leaveActive {
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 350ms;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
|
||||
.enter {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
|
||||
&.enterActive {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.leave {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
|
||||
&.leaveActive {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
@import "../base";
|
||||
|
||||
.enter, .leave {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.enterActive, .leaveActive {
|
||||
transition: transform, opacity;
|
||||
transition-timing-function: $animation-curve-fast-out-slow-in;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
.enter {
|
||||
opacity: 0;
|
||||
transform: scale(0.85);
|
||||
|
||||
&.enterActive {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.leave {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
|
||||
&.leaveActive {
|
||||
opacity: 0;
|
||||
transform: scale(1.25);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
@import "../base";
|
||||
|
||||
.enter, .leave {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.enterActive, .leaveActive {
|
||||
transition: transform, opacity;
|
||||
transition-timing-function: $animation-curve-fast-out-slow-in;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
.enter {
|
||||
opacity: 0;
|
||||
transform: scale(1.25);
|
||||
|
||||
&.enterActive {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.leave {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
|
||||
&.leaveActive {
|
||||
opacity: 0;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.AppBar = undefined;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
var AppBar = function AppBar(_ref) {
|
||||
var _classnames;
|
||||
|
||||
var theme = _ref.theme;
|
||||
|
||||
var props = _objectWithoutProperties(_ref, ['theme']);
|
||||
|
||||
var className = (0, _classnames3.default)(theme.appBar, (_classnames = {}, _defineProperty(_classnames, theme.fixed, props.fixed), _defineProperty(_classnames, theme.flat, props.flat), _classnames), props.className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'header',
|
||||
{ className: className, 'data-react-toolbox': 'app-bar' },
|
||||
props.children
|
||||
);
|
||||
};
|
||||
|
||||
AppBar.propTypes = {
|
||||
children: _react.PropTypes.node,
|
||||
className: _react.PropTypes.string,
|
||||
fixed: _react.PropTypes.bool,
|
||||
flat: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
appBar: _react.PropTypes.string,
|
||||
fixed: _react.PropTypes.string,
|
||||
flat: _react.PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
AppBar.defaultProps = {
|
||||
className: '',
|
||||
fixed: false,
|
||||
flat: false
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.APP_BAR)(AppBar);
|
||||
exports.AppBar = AppBar;
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
$appbar-color: $color-primary-dark !default;
|
||||
$appbar-contrast: $color-primary-contrast !default;
|
||||
$appbar-title-total-distance: 8 * $unit !default;
|
||||
$appbar-height: 6.4 * $unit !default;
|
||||
$appbar-h-padding: 2.4 * $unit !default;
|
||||
$appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding !default;
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.AppBar = undefined;
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _AppBar = require('./AppBar.js');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _theme = require('./theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var ThemedAppBar = (0, _reactCssThemr.themr)(_identifiers.APP_BAR, _theme2.default)(_AppBar.AppBar);
|
||||
|
||||
exports.default = ThemedAppBar;
|
||||
exports.AppBar = ThemedAppBar;
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
@import "../base";
|
||||
@import "./config";
|
||||
|
||||
.appBar {
|
||||
display: flex;
|
||||
height: $appbar-height;
|
||||
align-items: center;
|
||||
padding: 0 $appbar-h-padding;
|
||||
color: $appbar-contrast;
|
||||
background: $appbar-color;
|
||||
|
||||
&:not(.flat) {
|
||||
z-index: $z-index-high;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,.26);
|
||||
}
|
||||
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: $z-index-highest;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $appbar-contrast;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,440 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Autocomplete = exports.autocompleteFactory = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactDom = require('react-dom');
|
||||
|
||||
var _reactDom2 = _interopRequireDefault(_reactDom);
|
||||
|
||||
var _classnames4 = require('classnames');
|
||||
|
||||
var _classnames5 = _interopRequireDefault(_classnames4);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _Chip = require('../chip/Chip.js');
|
||||
|
||||
var _Chip2 = _interopRequireDefault(_Chip);
|
||||
|
||||
var _Input = require('../input/Input.js');
|
||||
|
||||
var _Input2 = _interopRequireDefault(_Input);
|
||||
|
||||
var _events = require('../utils/events.js');
|
||||
|
||||
var _events2 = _interopRequireDefault(_events);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var POSITION = {
|
||||
AUTO: 'auto',
|
||||
DOWN: 'down',
|
||||
UP: 'up'
|
||||
};
|
||||
|
||||
var factory = function factory(Chip, Input) {
|
||||
var Autocomplete = function (_Component) {
|
||||
_inherits(Autocomplete, _Component);
|
||||
|
||||
function Autocomplete() {
|
||||
var _Object$getPrototypeO;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, Autocomplete);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Autocomplete)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
direction: _this.props.direction,
|
||||
focus: false,
|
||||
showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet,
|
||||
query: _this.query(_this.props.value)
|
||||
}, _this.handleChange = function (keys, event) {
|
||||
var key = _this.props.multiple ? keys : keys[0];
|
||||
var query = _this.query(key);
|
||||
if (_this.props.onChange) _this.props.onChange(key, event);
|
||||
_this.setState({ focus: false, query: query, showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet }, function () {
|
||||
_reactDom2.default.findDOMNode(_this).querySelector('input').blur();
|
||||
});
|
||||
}, _this.handleQueryBlur = function () {
|
||||
if (_this.state.focus) _this.setState({ focus: false });
|
||||
}, _this.handleQueryChange = function (value) {
|
||||
_this.setState({ query: value, showAllSuggestions: false });
|
||||
}, _this.handleQueryFocus = function () {
|
||||
_this.refs.suggestions.scrollTop = 0;
|
||||
_this.setState({ active: '', focus: true });
|
||||
}, _this.handleQueryKeyDown = function (event) {
|
||||
// Clear query when pressing backspace and showing all suggestions.
|
||||
var shouldClearQuery = event.which === 8 && _this.props.showSuggestionsWhenValueIsSet && _this.state.showAllSuggestions;
|
||||
if (shouldClearQuery) {
|
||||
_this.setState({ query: '' });
|
||||
}
|
||||
}, _this.handleQueryKeyUp = function (event) {
|
||||
if (event.which === 13 && _this.state.active) _this.select(_this.state.active, event);
|
||||
if (event.which === 27) _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
|
||||
if ([40, 38].indexOf(event.which) !== -1) {
|
||||
var suggestionsKeys = [].concat(_toConsumableArray(_this.suggestions().keys()));
|
||||
var index = suggestionsKeys.indexOf(_this.state.active) + (event.which === 40 ? +1 : -1);
|
||||
if (index < 0) index = suggestionsKeys.length - 1;
|
||||
if (index >= suggestionsKeys.length) index = 0;
|
||||
_this.setState({ active: suggestionsKeys[index] });
|
||||
}
|
||||
}, _this.handleSuggestionHover = function (key) {
|
||||
_this.setState({ active: key });
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(Autocomplete, [{
|
||||
key: 'componentWillReceiveProps',
|
||||
value: function componentWillReceiveProps(nextProps) {
|
||||
if (!this.props.multiple) {
|
||||
this.setState({ query: nextProps.value });
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'shouldComponentUpdate',
|
||||
value: function shouldComponentUpdate(nextProps, nextState) {
|
||||
if (!this.state.focus && nextState.focus && this.props.direction === POSITION.AUTO) {
|
||||
var direction = this.calculateDirection();
|
||||
if (this.state.direction !== direction) {
|
||||
this.setState({ direction: direction });
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}, {
|
||||
key: 'calculateDirection',
|
||||
value: function calculateDirection() {
|
||||
if (this.props.direction === 'auto') {
|
||||
var client = _reactDom2.default.findDOMNode(this.refs.input).getBoundingClientRect();
|
||||
var screen_height = window.innerHeight || document.documentElement.offsetHeight;
|
||||
var up = client.top > screen_height / 2 + client.height;
|
||||
return up ? 'up' : 'down';
|
||||
} else {
|
||||
return this.props.direction;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'query',
|
||||
value: function query(key) {
|
||||
return !this.props.multiple && key ? this.source().get(key) : '';
|
||||
}
|
||||
}, {
|
||||
key: 'suggestions',
|
||||
value: function suggestions() {
|
||||
var suggest = new Map();
|
||||
var query = this.state.query.toLowerCase().trim() || '';
|
||||
var values = this.values();
|
||||
var source = this.source();
|
||||
|
||||
// Suggest any non-set value which matches the query
|
||||
if (this.props.multiple) {
|
||||
var _iteratorNormalCompletion = true;
|
||||
var _didIteratorError = false;
|
||||
var _iteratorError = undefined;
|
||||
|
||||
try {
|
||||
for (var _iterator = source[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||||
var _step$value = _slicedToArray(_step.value, 2);
|
||||
|
||||
var key = _step$value[0];
|
||||
var value = _step$value[1];
|
||||
|
||||
if (!values.has(key) && value.toLowerCase().trim().startsWith(query)) {
|
||||
suggest.set(key, value);
|
||||
}
|
||||
}
|
||||
|
||||
// When multiple is false, suggest any value which matches the query if showAllSuggestions is false
|
||||
} catch (err) {
|
||||
_didIteratorError = true;
|
||||
_iteratorError = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion && _iterator.return) {
|
||||
_iterator.return();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError) {
|
||||
throw _iteratorError;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (query && !this.state.showAllSuggestions) {
|
||||
var _iteratorNormalCompletion2 = true;
|
||||
var _didIteratorError2 = false;
|
||||
var _iteratorError2 = undefined;
|
||||
|
||||
try {
|
||||
for (var _iterator2 = source[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
|
||||
var _step2$value = _slicedToArray(_step2.value, 2);
|
||||
|
||||
var key = _step2$value[0];
|
||||
var value = _step2$value[1];
|
||||
|
||||
if (value.toLowerCase().trim().startsWith(query)) {
|
||||
suggest.set(key, value);
|
||||
}
|
||||
}
|
||||
|
||||
// When multiple is false, suggest all values when showAllSuggestions is true
|
||||
} catch (err) {
|
||||
_didIteratorError2 = true;
|
||||
_iteratorError2 = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion2 && _iterator2.return) {
|
||||
_iterator2.return();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError2) {
|
||||
throw _iteratorError2;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
suggest = source;
|
||||
}
|
||||
|
||||
return suggest;
|
||||
}
|
||||
}, {
|
||||
key: 'source',
|
||||
value: function source() {
|
||||
var src = this.props.source;
|
||||
|
||||
if (src.hasOwnProperty('length')) {
|
||||
return new Map(src.map(function (item) {
|
||||
return Array.isArray(item) ? [].concat(_toConsumableArray(item)) : [item, item];
|
||||
}));
|
||||
} else {
|
||||
return new Map(Object.keys(src).map(function (key) {
|
||||
return [key, src[key]];
|
||||
}));
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'values',
|
||||
value: function values() {
|
||||
var valueMap = new Map();
|
||||
var vals = this.props.multiple ? this.props.value : [this.props.value];
|
||||
var _iteratorNormalCompletion3 = true;
|
||||
var _didIteratorError3 = false;
|
||||
var _iteratorError3 = undefined;
|
||||
|
||||
try {
|
||||
for (var _iterator3 = this.source()[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
|
||||
var _step3$value = _slicedToArray(_step3.value, 2);
|
||||
|
||||
var k = _step3$value[0];
|
||||
var v = _step3$value[1];
|
||||
|
||||
if (vals.indexOf(k) !== -1) valueMap.set(k, v);
|
||||
}
|
||||
} catch (err) {
|
||||
_didIteratorError3 = true;
|
||||
_iteratorError3 = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion3 && _iterator3.return) {
|
||||
_iterator3.return();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError3) {
|
||||
throw _iteratorError3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return valueMap;
|
||||
}
|
||||
}, {
|
||||
key: 'select',
|
||||
value: function select(key, event) {
|
||||
_events2.default.pauseEvent(event);
|
||||
var values = this.values(this.props.value);
|
||||
this.handleChange([key].concat(_toConsumableArray(values.keys())), event);
|
||||
}
|
||||
}, {
|
||||
key: 'unselect',
|
||||
value: function unselect(key, event) {
|
||||
if (!this.props.disabled) {
|
||||
var values = this.values(this.props.value);
|
||||
values.delete(key);
|
||||
this.handleChange([].concat(_toConsumableArray(values.keys())), event);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'renderSelected',
|
||||
value: function renderSelected() {
|
||||
var _this2 = this;
|
||||
|
||||
if (this.props.multiple) {
|
||||
var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref) {
|
||||
var _ref2 = _slicedToArray(_ref, 2);
|
||||
|
||||
var key = _ref2[0];
|
||||
var value = _ref2[1];
|
||||
|
||||
return _react2.default.createElement(
|
||||
Chip,
|
||||
{
|
||||
key: key,
|
||||
className: _this2.props.theme.value,
|
||||
deletable: true,
|
||||
onDeleteClick: _this2.unselect.bind(_this2, key)
|
||||
},
|
||||
value
|
||||
);
|
||||
});
|
||||
|
||||
return _react2.default.createElement(
|
||||
'ul',
|
||||
{ className: this.props.theme.values },
|
||||
selectedItems
|
||||
);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'renderSuggestions',
|
||||
value: function renderSuggestions() {
|
||||
var _this3 = this;
|
||||
|
||||
var theme = this.props.theme;
|
||||
|
||||
var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref3) {
|
||||
var _ref4 = _slicedToArray(_ref3, 2);
|
||||
|
||||
var key = _ref4[0];
|
||||
var value = _ref4[1];
|
||||
|
||||
var className = (0, _classnames5.default)(theme.suggestion, _defineProperty({}, theme.active, _this3.state.active === key));
|
||||
return _react2.default.createElement(
|
||||
'li',
|
||||
{
|
||||
key: key,
|
||||
className: className,
|
||||
onMouseDown: _this3.select.bind(_this3, key),
|
||||
onMouseOver: _this3.handleSuggestionHover.bind(_this3, key)
|
||||
},
|
||||
value
|
||||
);
|
||||
});
|
||||
|
||||
var className = (0, _classnames5.default)(theme.suggestions, _defineProperty({}, theme.up, this.state.direction === 'up'));
|
||||
return _react2.default.createElement(
|
||||
'ul',
|
||||
{ ref: 'suggestions', className: className },
|
||||
suggestions
|
||||
);
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _props = this.props;
|
||||
var error = _props.error;
|
||||
var label = _props.label;
|
||||
var theme = _props.theme;
|
||||
|
||||
var other = _objectWithoutProperties(_props, ['error', 'label', 'theme']);
|
||||
|
||||
var className = (0, _classnames5.default)(theme.autocomplete, _defineProperty({}, theme.focus, this.state.focus), this.props.className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'autocomplete', className: className },
|
||||
this.props.selectedPosition === 'above' ? this.renderSelected() : null,
|
||||
_react2.default.createElement(Input, _extends({}, other, {
|
||||
ref: 'input',
|
||||
className: theme.input,
|
||||
error: error,
|
||||
label: label,
|
||||
onBlur: this.handleQueryBlur,
|
||||
onChange: this.handleQueryChange,
|
||||
onFocus: this.handleQueryFocus,
|
||||
onKeyDown: this.handleQueryKeyDown,
|
||||
onKeyUp: this.handleQueryKeyUp,
|
||||
value: this.state.query
|
||||
})),
|
||||
this.renderSuggestions(),
|
||||
this.props.selectedPosition === 'below' ? this.renderSelected() : null
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Autocomplete;
|
||||
}(_react.Component);
|
||||
|
||||
Autocomplete.propTypes = {
|
||||
className: _react.PropTypes.string,
|
||||
direction: _react.PropTypes.oneOf(['auto', 'up', 'down']),
|
||||
disabled: _react.PropTypes.bool,
|
||||
error: _react.PropTypes.string,
|
||||
label: _react.PropTypes.string,
|
||||
multiple: _react.PropTypes.bool,
|
||||
onChange: _react.PropTypes.func,
|
||||
selectedPosition: _react.PropTypes.oneOf(['above', 'below']),
|
||||
showSuggestionsWhenValueIsSet: _react.PropTypes.bool,
|
||||
source: _react.PropTypes.any,
|
||||
theme: _react.PropTypes.shape({
|
||||
active: _react.PropTypes.string.isRequired,
|
||||
autocomplete: _react.PropTypes.string.isRequired,
|
||||
focus: _react.PropTypes.string.isRequired,
|
||||
input: _react.PropTypes.string.isRequired,
|
||||
label: _react.PropTypes.string.isRequired,
|
||||
suggestion: _react.PropTypes.string.isRequired,
|
||||
suggestions: _react.PropTypes.string.isRequired,
|
||||
up: _react.PropTypes.string.isRequired,
|
||||
value: _react.PropTypes.string.isRequired,
|
||||
values: _react.PropTypes.string.isRequired
|
||||
}),
|
||||
value: _react.PropTypes.any
|
||||
};
|
||||
Autocomplete.defaultProps = {
|
||||
className: '',
|
||||
direction: 'auto',
|
||||
selectedPosition: 'above',
|
||||
multiple: true,
|
||||
showSuggestionsWhenValueIsSet: false,
|
||||
source: {}
|
||||
};
|
||||
|
||||
|
||||
return Autocomplete;
|
||||
};
|
||||
|
||||
var Autocomplete = factory(_Chip2.default, _Input2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.AUTOCOMPLETE)(Autocomplete);
|
||||
exports.autocompleteFactory = factory;
|
||||
exports.Autocomplete = Autocomplete;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
$autocomplete-color-primary-contrast: $color-primary-contrast !default;
|
||||
$autocomplete-color-primary: $color-primary !default;
|
||||
$autocomplete-overflow-max-height: 45vh !default;
|
||||
$autocomplete-suggestion-active-background: $palette-grey-200 !default;
|
||||
$autocomplete-suggestion-padding: $unit !default;
|
||||
$autocomplete-suggestions-background: $color-white !default;
|
||||
$autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0 !default;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Autocomplete = undefined;
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _Autocomplete = require('./Autocomplete.js');
|
||||
|
||||
var _chip = require('../chip');
|
||||
|
||||
var _chip2 = _interopRequireDefault(_chip);
|
||||
|
||||
var _input = require('../input');
|
||||
|
||||
var _input2 = _interopRequireDefault(_input);
|
||||
|
||||
var _theme = require('./theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var Autocomplete = (0, _Autocomplete.autocompleteFactory)(_chip2.default, _input2.default);
|
||||
var ThemedAutocomplete = (0, _reactCssThemr.themr)(_identifiers.AUTOCOMPLETE, _theme2.default)(Autocomplete);
|
||||
|
||||
exports.default = ThemedAutocomplete;
|
||||
exports.Autocomplete = ThemedAutocomplete;
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
@import "../base";
|
||||
@import "./config";
|
||||
@import "../input/config";
|
||||
|
||||
.autocomplete {
|
||||
position: relative;
|
||||
padding: $unit 0;
|
||||
&.focus {
|
||||
.label {
|
||||
color: $autocomplete-color-primary;
|
||||
}
|
||||
.suggestions {
|
||||
max-height: $autocomplete-overflow-max-height;
|
||||
visibility: visible;
|
||||
box-shadow: $zdepth-shadow-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: $font-size-tiny;
|
||||
color: $color-text-secondary;
|
||||
transition: color $animation-duration $animation-curve-default;
|
||||
}
|
||||
|
||||
.values {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: $unit / 2;
|
||||
}
|
||||
|
||||
.value {
|
||||
margin: $autocomplete-value-margin;
|
||||
}
|
||||
|
||||
.suggestions {
|
||||
@include no-webkit-scrollbar;
|
||||
position: absolute;
|
||||
z-index: $z-index-high;
|
||||
width: 100%;
|
||||
max-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
visibility: hidden;
|
||||
background-color: $autocomplete-suggestions-background;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: max-height, box-shadow;
|
||||
&:not(.up) {
|
||||
margin-top: - $input-padding;
|
||||
}
|
||||
&.up {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.suggestion {
|
||||
padding: $autocomplete-suggestion-padding;
|
||||
font-size: $input-field-font-size;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
background-color: $autocomplete-suggestion-active-background;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
position: relative;
|
||||
&:after {
|
||||
$size: ($input-field-height / 7);
|
||||
$border: $size solid transparent;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $input-chevron-offset;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border-top: $size solid $input-text-bottom-border-color;
|
||||
border-right: $border;
|
||||
border-left: $border;
|
||||
transition: transform $animation-duration $animation-curve-default;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Avatar = exports.avatarFactory = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _FontIcon = require('../font_icon/FontIcon.js');
|
||||
|
||||
var _FontIcon2 = _interopRequireDefault(_FontIcon);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
var factory = function factory(FontIcon) {
|
||||
var Avatar = function Avatar(_ref) {
|
||||
var children = _ref.children;
|
||||
var className = _ref.className;
|
||||
var icon = _ref.icon;
|
||||
var image = _ref.image;
|
||||
var theme = _ref.theme;
|
||||
var title = _ref.title;
|
||||
|
||||
var other = _objectWithoutProperties(_ref, ['children', 'className', 'icon', 'image', 'theme', 'title']);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
_extends({ 'data-react-toolbox': 'avatar', className: theme.avatar + ' ' + className }, other),
|
||||
children,
|
||||
typeof image === 'string' ? _react2.default.createElement('img', { className: theme.image, src: image, title: title }) : image,
|
||||
typeof icon === 'string' ? _react2.default.createElement(FontIcon, { className: theme.letter, value: icon }) : icon,
|
||||
title ? _react2.default.createElement(
|
||||
'span',
|
||||
{ className: theme.letter },
|
||||
title[0]
|
||||
) : null
|
||||
);
|
||||
};
|
||||
|
||||
Avatar.propTypes = {
|
||||
children: _react.PropTypes.node,
|
||||
className: _react.PropTypes.string,
|
||||
icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
image: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
theme: _react2.default.PropTypes.shape({
|
||||
avatar: _react2.default.PropTypes.string.isRequired,
|
||||
image: _react2.default.PropTypes.string.isRequired,
|
||||
letter: _react2.default.PropTypes.string.isRequired
|
||||
}),
|
||||
title: _react.PropTypes.string
|
||||
};
|
||||
|
||||
return Avatar;
|
||||
};
|
||||
|
||||
var Avatar = factory(_FontIcon2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.AVATAR)(Avatar);
|
||||
exports.avatarFactory = factory;
|
||||
exports.Avatar = Avatar;
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
$avatar-color: $color-white !default;
|
||||
$avatar-background: $palette-grey-500 !default;
|
||||
$avatar-size: 4 * $unit !default;
|
||||
$avatar-font-size: 2.4 * $unit !default;
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Avatar = undefined;
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _Avatar = require('./Avatar.js');
|
||||
|
||||
var _FontIcon = require('../font_icon/FontIcon.js');
|
||||
|
||||
var _FontIcon2 = _interopRequireDefault(_FontIcon);
|
||||
|
||||
var _theme = require('./theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var Avatar = (0, _Avatar.avatarFactory)(_FontIcon2.default);
|
||||
var ThemedAvatar = (0, _reactCssThemr.themr)(_identifiers.AVATAR, _theme2.default)(Avatar);
|
||||
|
||||
exports.default = ThemedAvatar;
|
||||
exports.Avatar = ThemedAvatar;
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
@import "../base";
|
||||
@import "./config";
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
overflow: hidden;
|
||||
font-size: $avatar-font-size;
|
||||
color: $avatar-color;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background-color: $avatar-background;
|
||||
border-radius: 50%;
|
||||
> svg {
|
||||
width: 1em;
|
||||
height: $avatar-size;
|
||||
fill: currentColor;
|
||||
}
|
||||
> img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.letter {
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: $avatar-size;
|
||||
}
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Button = exports.buttonFactory = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _FontIcon = require('../font_icon/FontIcon.js');
|
||||
|
||||
var _FontIcon2 = _interopRequireDefault(_FontIcon);
|
||||
|
||||
var _Ripple = require('../ripple/Ripple.js');
|
||||
|
||||
var _Ripple2 = _interopRequireDefault(_Ripple);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var factory = function factory(ripple, FontIcon) {
|
||||
var Button = function (_Component) {
|
||||
_inherits(Button, _Component);
|
||||
|
||||
function Button() {
|
||||
var _Object$getPrototypeO;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, Button);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Button)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
|
||||
_this.refs.button.blur();
|
||||
if (_this.props.onMouseUp) _this.props.onMouseUp(event);
|
||||
}, _this.handleMouseLeave = function (event) {
|
||||
_this.refs.button.blur();
|
||||
if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(Button, [{
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _classnames;
|
||||
|
||||
var _props = this.props;
|
||||
var accent = _props.accent;
|
||||
var children = _props.children;
|
||||
var className = _props.className;
|
||||
var flat = _props.flat;
|
||||
var floating = _props.floating;
|
||||
var href = _props.href;
|
||||
var icon = _props.icon;
|
||||
var inverse = _props.inverse;
|
||||
var label = _props.label;
|
||||
var mini = _props.mini;
|
||||
var neutral = _props.neutral;
|
||||
var primary = _props.primary;
|
||||
var theme = _props.theme;
|
||||
var raised = _props.raised;
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'href', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
|
||||
|
||||
var element = href ? 'a' : 'button';
|
||||
var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
||||
var shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
|
||||
|
||||
var classes = (0, _classnames3.default)(theme.button, [theme[shape]], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.mini, mini), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
|
||||
|
||||
var props = _extends({}, others, {
|
||||
href: href,
|
||||
ref: 'button',
|
||||
className: classes,
|
||||
disabled: this.props.disabled,
|
||||
onMouseUp: this.handleMouseUp,
|
||||
onMouseLeave: this.handleMouseLeave,
|
||||
'data-react-toolbox': 'button'
|
||||
});
|
||||
|
||||
return _react2.default.createElement(element, props, icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null, label, children);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Button;
|
||||
}(_react.Component);
|
||||
|
||||
Button.propTypes = {
|
||||
accent: _react.PropTypes.bool,
|
||||
children: _react.PropTypes.node,
|
||||
className: _react.PropTypes.string,
|
||||
disabled: _react.PropTypes.bool,
|
||||
flat: _react.PropTypes.bool,
|
||||
floating: _react.PropTypes.bool,
|
||||
href: _react.PropTypes.string,
|
||||
icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
inverse: _react.PropTypes.bool,
|
||||
label: _react.PropTypes.string,
|
||||
mini: _react.PropTypes.bool,
|
||||
neutral: _react.PropTypes.bool,
|
||||
onMouseLeave: _react.PropTypes.func,
|
||||
onMouseUp: _react.PropTypes.func,
|
||||
primary: _react.PropTypes.bool,
|
||||
raised: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
accent: _react.PropTypes.string,
|
||||
button: _react.PropTypes.string,
|
||||
flat: _react.PropTypes.string,
|
||||
floating: _react.PropTypes.string,
|
||||
icon: _react.PropTypes.string,
|
||||
inverse: _react.PropTypes.string,
|
||||
mini: _react.PropTypes.string,
|
||||
neutral: _react.PropTypes.string,
|
||||
primary: _react.PropTypes.string,
|
||||
raised: _react.PropTypes.string,
|
||||
rippleWrapper: _react.PropTypes.string,
|
||||
toggle: _react.PropTypes.string
|
||||
}),
|
||||
type: _react.PropTypes.string
|
||||
};
|
||||
Button.defaultProps = {
|
||||
accent: false,
|
||||
className: '',
|
||||
flat: false,
|
||||
floating: false,
|
||||
mini: false,
|
||||
neutral: true,
|
||||
primary: false,
|
||||
raised: false
|
||||
};
|
||||
|
||||
|
||||
return ripple(Button);
|
||||
};
|
||||
|
||||
var Button = factory((0, _Ripple2.default)({ centered: false }), _FontIcon2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(Button);
|
||||
exports.buttonFactory = factory;
|
||||
exports.Button = Button;
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.IconButton = exports.iconButtonFactory = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _FontIcon = require('../font_icon/FontIcon.js');
|
||||
|
||||
var _FontIcon2 = _interopRequireDefault(_FontIcon);
|
||||
|
||||
var _Ripple = require('../ripple/Ripple.js');
|
||||
|
||||
var _Ripple2 = _interopRequireDefault(_Ripple);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var factory = function factory(ripple, FontIcon) {
|
||||
var IconButton = function (_Component) {
|
||||
_inherits(IconButton, _Component);
|
||||
|
||||
function IconButton() {
|
||||
var _Object$getPrototypeO;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, IconButton);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
|
||||
_this.refs.button.blur();
|
||||
if (_this.props.onMouseUp) _this.props.onMouseUp(event);
|
||||
}, _this.handleMouseLeave = function (event) {
|
||||
_this.refs.button.blur();
|
||||
if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(IconButton, [{
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _classnames;
|
||||
|
||||
var _props = this.props;
|
||||
var accent = _props.accent;
|
||||
var children = _props.children;
|
||||
var className = _props.className;
|
||||
var href = _props.href;
|
||||
var icon = _props.icon;
|
||||
var inverse = _props.inverse;
|
||||
var neutral = _props.neutral;
|
||||
var primary = _props.primary;
|
||||
var theme = _props.theme;
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'href', 'icon', 'inverse', 'neutral', 'primary', 'theme']);
|
||||
|
||||
var element = href ? 'a' : 'button';
|
||||
var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
||||
var classes = (0, _classnames3.default)([theme.toggle], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
|
||||
|
||||
var props = _extends({}, others, {
|
||||
href: href,
|
||||
ref: 'button',
|
||||
className: classes,
|
||||
disabled: this.props.disabled,
|
||||
onMouseUp: this.handleMouseUp,
|
||||
onMouseLeave: this.handleMouseLeave,
|
||||
'data-react-toolbox': 'button'
|
||||
});
|
||||
|
||||
return _react2.default.createElement(element, props, icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null, children);
|
||||
}
|
||||
}]);
|
||||
|
||||
return IconButton;
|
||||
}(_react.Component);
|
||||
|
||||
IconButton.propTypes = {
|
||||
accent: _react2.default.PropTypes.bool,
|
||||
children: _react2.default.PropTypes.node,
|
||||
className: _react2.default.PropTypes.string,
|
||||
disabled: _react2.default.PropTypes.bool,
|
||||
href: _react2.default.PropTypes.string,
|
||||
icon: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]),
|
||||
inverse: _react2.default.PropTypes.bool,
|
||||
neutral: _react2.default.PropTypes.bool,
|
||||
onMouseLeave: _react2.default.PropTypes.func,
|
||||
onMouseUp: _react2.default.PropTypes.func,
|
||||
primary: _react2.default.PropTypes.bool,
|
||||
theme: _react2.default.PropTypes.object,
|
||||
type: _react2.default.PropTypes.string
|
||||
};
|
||||
IconButton.defaultProps = {
|
||||
accent: false,
|
||||
className: '',
|
||||
neutral: true,
|
||||
primary: false
|
||||
};
|
||||
|
||||
|
||||
return ripple(IconButton);
|
||||
};
|
||||
|
||||
var IconButton = factory((0, _Ripple2.default)({ centered: true }), _FontIcon2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(IconButton);
|
||||
exports.iconButtonFactory = factory;
|
||||
exports.IconButton = IconButton;
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
'use strict';
|
||||
|
||||
var _expect = require('expect');
|
||||
|
||||
var _expect2 = _interopRequireDefault(_expect);
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactDom = require('react-dom');
|
||||
|
||||
var _reactDom2 = _interopRequireDefault(_reactDom);
|
||||
|
||||
var _reactAddonsTestUtils = require('react-addons-test-utils');
|
||||
|
||||
var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
|
||||
|
||||
var _theme = require('../theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
var _Button = require('../Button');
|
||||
|
||||
var _Button2 = _interopRequireDefault(_Button);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var getRenderedClassName = function getRenderedClassName(tree, Component) {
|
||||
var rendered = _reactAddonsTestUtils2.default.findRenderedComponentWithType(tree, Component);
|
||||
return _reactDom2.default.findDOMNode(rendered).getAttribute('class');
|
||||
};
|
||||
|
||||
describe('Button', function () {
|
||||
describe('#render', function () {
|
||||
it('uses flat and neutral styles by default', function () {
|
||||
var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { theme: _theme2.default }));
|
||||
var className = getRenderedClassName(tree, _Button.Button);
|
||||
(0, _expect2.default)(className).toContain(_theme2.default.flat);
|
||||
(0, _expect2.default)(className).toContain(_theme2.default.neutral);
|
||||
});
|
||||
|
||||
it('renders accent button with accent style', function () {
|
||||
var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { accent: true, theme: _theme2.default }));
|
||||
var className = getRenderedClassName(tree, _Button.Button);
|
||||
(0, _expect2.default)(className).toContain(_theme2.default.flat);
|
||||
(0, _expect2.default)(className).toContain(_theme2.default.accent);
|
||||
});
|
||||
|
||||
it('renders mini button with mini style', function () {
|
||||
var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { floating: true, mini: true, theme: _theme2.default }));
|
||||
var className = getRenderedClassName(tree, _Button.Button);
|
||||
(0, _expect2.default)(className).toContain(_theme2.default.floating);
|
||||
(0, _expect2.default)(className).toContain(_theme2.default.neutral);
|
||||
(0, _expect2.default)(className).toContain(_theme2.default.mini);
|
||||
});
|
||||
|
||||
it('renders mini accented button with both styles', function () {
|
||||
var tree = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(_Button2.default, { accent: true, mini: true, theme: _theme2.default }));
|
||||
var className = getRenderedClassName(tree, _Button.Button);
|
||||
(0, _expect2.default)(className).toContain(_theme2.default.flat);
|
||||
(0, _expect2.default)(className).toContain(_theme2.default.accent);
|
||||
(0, _expect2.default)(className).toContain(_theme2.default.mini);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
$button-neutral-color: $color-white !default;
|
||||
$button-neutral-color-contrast: $palette-grey-900 !default;
|
||||
$button-neutral-color-hover: rgba($palette-grey-900, .2) !default;
|
||||
$button-primary-color-contrast: $color-primary-contrast !default;
|
||||
$button-primary-color-hover: rgba($color-primary, .2) !default;
|
||||
$button-primary-color: $color-primary !default;
|
||||
$button-accent-color-contrast: $color-primary-contrast !default;
|
||||
$button-accent-color-hover: rgba($color-accent, .2) !default;
|
||||
$button-accent-color: $color-accent !default;
|
||||
$button-disabled-text-color: rgba($color-black, 0.26) !default;
|
||||
$button-disabled-background-color: rgba($color-black, 0.12) !default;
|
||||
$button-border-radius: 0.2 * $unit !default;
|
||||
$button-floating-font-size: $unit * 2.4 !default;
|
||||
$button-floating-height: $unit * 5.6 !default;
|
||||
$button-floating-mini-height: $unit * 4 !default;
|
||||
$button-floating-mini-font-size: $button-floating-mini-height / 2.25 !default;
|
||||
$button-height: $unit * 3.6 !default;
|
||||
$button-squared-icon-margin: $unit * .6 !default;
|
||||
$button-squared-min-width: 9 * $unit !default;
|
||||
$button-squared-padding: 0 $unit * 1.2 !default;
|
||||
$button-toggle-font-size: $unit * 2 !default;
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.IconButton = exports.Button = undefined;
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _Button = require('./Button.js');
|
||||
|
||||
var _IconButton = require('./IconButton.js');
|
||||
|
||||
var _FontIcon = require('../font_icon/FontIcon.js');
|
||||
|
||||
var _FontIcon2 = _interopRequireDefault(_FontIcon);
|
||||
|
||||
var _ripple = require('../ripple');
|
||||
|
||||
var _ripple2 = _interopRequireDefault(_ripple);
|
||||
|
||||
var _theme = require('./theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var Button = (0, _Button.buttonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
|
||||
var IconButton = (0, _IconButton.iconButtonFactory)((0, _ripple2.default)({ centered: true }), _FontIcon2.default);
|
||||
var ThemedButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(Button);
|
||||
var ThemedIconButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(IconButton);
|
||||
|
||||
exports.default = ThemedButton;
|
||||
exports.Button = ThemedButton;
|
||||
exports.IconButton = ThemedIconButton;
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
@import "../base";
|
||||
@import "./config";
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
%button {
|
||||
@include typo-button();
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: $button-height;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
outline: none;
|
||||
transition: box-shadow .2s $animation-curve-fast-out-linear-in, background-color .2s $animation-curve-default, color .2s $animation-curve-default;
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
> span:not([data-react-toolbox="tooltip"]) {
|
||||
display: inline-block;
|
||||
line-height: $button-height;
|
||||
vertical-align: middle;
|
||||
}
|
||||
> svg {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: $button-height;
|
||||
font-size: 120%;
|
||||
vertical-align: middle;
|
||||
fill: currentColor;
|
||||
}
|
||||
> * {
|
||||
pointer-events: none;
|
||||
}
|
||||
> .rippleWrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
&[disabled] {
|
||||
color: $button-disabled-text-color;
|
||||
pointer-events: none;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
%squared {
|
||||
min-width: $button-squared-min-width;
|
||||
padding: $button-squared-padding;
|
||||
border-radius: $button-border-radius;
|
||||
.icon {
|
||||
margin-right: $button-squared-icon-margin;
|
||||
font-size: 120%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
> svg {
|
||||
margin-right: .5 * $unit;
|
||||
}
|
||||
}
|
||||
|
||||
%solid {
|
||||
&[disabled] {
|
||||
@include shadow-2dp();
|
||||
background-color: $button-disabled-background-color;
|
||||
}
|
||||
&:active {
|
||||
@include shadow-4dp();
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
@include focus-shadow();
|
||||
}
|
||||
}
|
||||
|
||||
.raised {
|
||||
@extend %button;
|
||||
@extend %squared;
|
||||
@extend %solid;
|
||||
@include shadow-2dp();
|
||||
}
|
||||
|
||||
.flat {
|
||||
@extend %button;
|
||||
@extend %squared;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.floating {
|
||||
@extend %button;
|
||||
@extend %solid;
|
||||
width: $button-floating-height;
|
||||
height: $button-floating-height;
|
||||
font-size: $button-floating-font-size;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
|
||||
.icon {
|
||||
line-height: $button-floating-height;
|
||||
}
|
||||
> .rippleWrapper {
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.mini {
|
||||
width: $button-floating-mini-height;
|
||||
height: $button-floating-mini-height;
|
||||
font-size: $button-floating-mini-font-size;
|
||||
.icon {
|
||||
line-height: $button-floating-mini-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle {
|
||||
@extend %button;
|
||||
width: $button-height;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
> .icon, svg {
|
||||
font-size: $button-toggle-font-size;
|
||||
line-height: $button-height;
|
||||
vertical-align: middle;
|
||||
}
|
||||
> .rippleWrapper {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.neutral:not([disabled]) {
|
||||
&.raised, &.floating {
|
||||
color: $button-neutral-color-contrast;
|
||||
background-color: $button-neutral-color;
|
||||
}
|
||||
&.flat, &.toggle {
|
||||
color: $button-neutral-color-contrast;
|
||||
&:focus:not(:active) {
|
||||
background: $button-neutral-color-hover;
|
||||
}
|
||||
}
|
||||
&.flat:hover {
|
||||
background: $button-neutral-color-hover;
|
||||
}
|
||||
|
||||
&.inverse {
|
||||
&.raised, &.floating {
|
||||
color: $button-neutral-color;
|
||||
background-color: $button-neutral-color-contrast;
|
||||
}
|
||||
&.flat, &.toggle {
|
||||
color: $button-neutral-color;
|
||||
&:focus:not(:active) {
|
||||
background: $button-neutral-color-hover;
|
||||
}
|
||||
}
|
||||
&.flat:hover {
|
||||
background: $button-neutral-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include btn-colors("primary", $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover);
|
||||
@include btn-colors("accent", $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover);
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Card = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
var Card = function Card(_ref) {
|
||||
var children = _ref.children;
|
||||
var className = _ref.className;
|
||||
var raised = _ref.raised;
|
||||
var theme = _ref.theme;
|
||||
|
||||
var other = _objectWithoutProperties(_ref, ['children', 'className', 'raised', 'theme']);
|
||||
|
||||
var classes = (0, _classnames3.default)(theme.card, _defineProperty({}, theme.raised, raised), className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
_extends({ 'data-react-toolbox': 'card', className: classes }, other),
|
||||
children
|
||||
);
|
||||
};
|
||||
|
||||
Card.propTypes = {
|
||||
children: _react.PropTypes.any,
|
||||
className: _react.PropTypes.string,
|
||||
raised: _react.PropTypes.bool,
|
||||
theme: _react2.default.PropTypes.shape({
|
||||
card: _react2.default.PropTypes.string,
|
||||
raised: _react2.default.PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(Card);
|
||||
exports.Card = Card;
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.CardActions = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _classnames = require('classnames');
|
||||
|
||||
var _classnames2 = _interopRequireDefault(_classnames);
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
var CardActions = function CardActions(_ref) {
|
||||
var children = _ref.children;
|
||||
var className = _ref.className;
|
||||
var theme = _ref.theme;
|
||||
|
||||
var other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
_extends({ className: (0, _classnames2.default)(theme.cardActions, className) }, other),
|
||||
children
|
||||
);
|
||||
};
|
||||
|
||||
CardActions.propTypes = {
|
||||
children: _react.PropTypes.any,
|
||||
className: _react.PropTypes.string,
|
||||
theme: _react2.default.PropTypes.shape({
|
||||
cardActions: _react2.default.PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardActions);
|
||||
exports.CardActions = CardActions;
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.CardMedia = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _classnames3 = require('classnames');
|
||||
|
||||
var _classnames4 = _interopRequireDefault(_classnames3);
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
var CardMedia = function CardMedia(_ref) {
|
||||
var aspectRatio = _ref.aspectRatio;
|
||||
var children = _ref.children;
|
||||
var className = _ref.className;
|
||||
var color = _ref.color;
|
||||
var contentOverlay = _ref.contentOverlay;
|
||||
var image = _ref.image;
|
||||
var theme = _ref.theme;
|
||||
|
||||
var other = _objectWithoutProperties(_ref, ['aspectRatio', 'children', 'className', 'color', 'contentOverlay', 'image', 'theme']);
|
||||
|
||||
var classes = (0, _classnames4.default)(theme.cardMedia, _defineProperty({}, theme[aspectRatio], aspectRatio), className);
|
||||
|
||||
var innerClasses = (0, _classnames4.default)(theme.content, _defineProperty({}, theme.contentOverlay, contentOverlay));
|
||||
|
||||
var bgStyle = {
|
||||
backgroundColor: color ? color : undefined,
|
||||
backgroundImage: typeof image === 'string' ? 'url(\'' + image + '\')' : undefined
|
||||
};
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
_extends({ style: bgStyle, className: classes }, other),
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: innerClasses },
|
||||
children
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
CardMedia.propTypes = {
|
||||
aspectRatio: _react.PropTypes.oneOf(['wide', 'square']),
|
||||
children: _react.PropTypes.any,
|
||||
className: _react.PropTypes.string,
|
||||
color: _react.PropTypes.string,
|
||||
contentOverlay: _react.PropTypes.bool,
|
||||
image: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
theme: _react2.default.PropTypes.shape({
|
||||
cardMedia: _react2.default.PropTypes.string.isRequired,
|
||||
content: _react2.default.PropTypes.string.isRequired,
|
||||
contentOverlay: _react2.default.PropTypes.string.isRequired,
|
||||
square: _react2.default.PropTypes.string.isRequired,
|
||||
wide: _react2.default.PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardMedia);
|
||||
exports.CardMedia = CardMedia;
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.CardText = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _classnames = require('classnames');
|
||||
|
||||
var _classnames2 = _interopRequireDefault(_classnames);
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
var CardText = function CardText(_ref) {
|
||||
var children = _ref.children;
|
||||
var className = _ref.className;
|
||||
var theme = _ref.theme;
|
||||
|
||||
var other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
_extends({ className: (0, _classnames2.default)(theme.cardText, className) }, other),
|
||||
typeof children === 'string' ? _react2.default.createElement(
|
||||
'p',
|
||||
null,
|
||||
children
|
||||
) : children
|
||||
);
|
||||
};
|
||||
|
||||
CardText.propTypes = {
|
||||
children: _react.PropTypes.any,
|
||||
className: _react.PropTypes.string,
|
||||
theme: _react2.default.PropTypes.shape({
|
||||
cardText: _react2.default.PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardText);
|
||||
exports.CardText = CardText;
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.cardTitleFactory = exports.CardTitle = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _Avatar = require('../avatar/Avatar.js');
|
||||
|
||||
var _Avatar2 = _interopRequireDefault(_Avatar);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
var factory = function factory(Avatar) {
|
||||
var CardTitle = function CardTitle(_ref) {
|
||||
var _classnames;
|
||||
|
||||
var avatar = _ref.avatar;
|
||||
var children = _ref.children;
|
||||
var className = _ref.className;
|
||||
var subtitle = _ref.subtitle;
|
||||
var theme = _ref.theme;
|
||||
var title = _ref.title;
|
||||
|
||||
var other = _objectWithoutProperties(_ref, ['avatar', 'children', 'className', 'subtitle', 'theme', 'title']);
|
||||
|
||||
var classes = (0, _classnames3.default)(theme.cardTitle, (_classnames = {}, _defineProperty(_classnames, theme.small, avatar), _defineProperty(_classnames, theme.large, !avatar), _classnames), className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
_extends({ className: classes }, other),
|
||||
typeof avatar === 'string' ? _react2.default.createElement(Avatar, { image: avatar }) : avatar,
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
null,
|
||||
title && _react2.default.createElement(
|
||||
'h5',
|
||||
{ className: theme.title },
|
||||
title
|
||||
),
|
||||
children && typeof children === 'string' && _react2.default.createElement(
|
||||
'h5',
|
||||
{ className: theme.title },
|
||||
children
|
||||
),
|
||||
subtitle && _react2.default.createElement(
|
||||
'p',
|
||||
{ className: theme.subtitle },
|
||||
subtitle
|
||||
),
|
||||
children && typeof children !== 'string' && children
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
CardTitle.propTypes = {
|
||||
avatar: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
children: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element, _react.PropTypes.array]),
|
||||
className: _react.PropTypes.string,
|
||||
subtitle: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
theme: _react2.default.PropTypes.shape({
|
||||
large: _react2.default.PropTypes.string.isRequired,
|
||||
title: _react2.default.PropTypes.string.isRequired,
|
||||
small: _react2.default.PropTypes.string.isRequired,
|
||||
subtitle: _react2.default.PropTypes.string.isRequired
|
||||
}),
|
||||
title: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element])
|
||||
};
|
||||
|
||||
return CardTitle;
|
||||
};
|
||||
|
||||
var CardTitle = factory(_Avatar2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardTitle);
|
||||
exports.CardTitle = CardTitle;
|
||||
exports.cardTitleFactory = factory;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
$card-color-white: $color-white !default;
|
||||
$card-text-overlay: rgba($color-black, 0.35) !default;
|
||||
$card-background-color: $card-color-white !default;
|
||||
$card-padding-sm: .8 * $unit !default;
|
||||
$card-padding: 1.6 * $unit !default;
|
||||
$card-padding-lg: 2 * $unit !default;
|
||||
$card-font-size: $font-size-small !default;
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.CardTitle = exports.CardText = exports.CardMedia = exports.CardActions = exports.Card = undefined;
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _Card = require('./Card.js');
|
||||
|
||||
var _CardActions = require('./CardActions.js');
|
||||
|
||||
var _CardMedia = require('./CardMedia.js');
|
||||
|
||||
var _CardText = require('./CardText.js');
|
||||
|
||||
var _CardTitle = require('./CardTitle.js');
|
||||
|
||||
var _avatar = require('../avatar');
|
||||
|
||||
var _avatar2 = _interopRequireDefault(_avatar);
|
||||
|
||||
var _theme = require('./theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var CardTitle = (0, _CardTitle.cardTitleFactory)(_avatar2.default);
|
||||
var ThemedCard = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_Card.Card);
|
||||
var ThemedCardActions = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_CardActions.CardActions);
|
||||
var ThemedCardMedia = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_CardMedia.CardMedia);
|
||||
var ThemedCardText = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(_CardText.CardText);
|
||||
var ThemedCardTitle = (0, _reactCssThemr.themr)(_identifiers.CARD, _theme2.default)(CardTitle);
|
||||
|
||||
exports.default = ThemedCard;
|
||||
exports.Card = ThemedCard;
|
||||
exports.CardActions = ThemedCardActions;
|
||||
exports.CardMedia = ThemedCardMedia;
|
||||
exports.CardText = ThemedCardText;
|
||||
exports.CardTitle = ThemedCardTitle;
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
@import "../base";
|
||||
@import "./config";
|
||||
|
||||
.card {
|
||||
@include shadow-2dp();
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
font-size: $card-font-size;
|
||||
background: $card-background-color;
|
||||
border-radius: .2 * $unit;
|
||||
&.raised {
|
||||
@include shadow-8dp();
|
||||
}
|
||||
[data-react-toolbox="avatar"] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.cardMedia {
|
||||
position: relative;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
&.wide, &.square {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
.content {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
.content > iframe, .content > video, .content > img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
&.wide {
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
&.square {
|
||||
padding-top: 100%;
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
}
|
||||
.contentOverlay {
|
||||
.cardTitle, .cardActions, .cardText {
|
||||
background-color: $card-text-overlay;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
[data-react-toolbox="avatar"] {
|
||||
margin-right: 1.3 * $unit;
|
||||
}
|
||||
.subtitle {
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
&.large {
|
||||
padding: $card-padding-lg $card-padding ($card-padding - .2 * $unit);
|
||||
.title {
|
||||
@include typo-headline();
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
&.small {
|
||||
padding: $card-padding;
|
||||
.title {
|
||||
@include typo-body-2(false, true);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.subtitle {
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
.cardMedia & {
|
||||
.title, .subtitle {
|
||||
color: $card-color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cardTitle, .cardText {
|
||||
padding: ($card-padding - .2 * $unit) $card-padding;
|
||||
&:last-child {
|
||||
padding-bottom: $card-padding-lg;
|
||||
}
|
||||
+ .cardText {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cardActions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: $card-padding-sm;
|
||||
[data-react-toolbox="button"] {
|
||||
min-width: 0;
|
||||
padding: 0 $card-padding-sm;
|
||||
margin: 0 $card-padding-sm / 2;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
var factory = function factory(ripple) {
|
||||
var Check = function Check(_ref) {
|
||||
var checked = _ref.checked;
|
||||
var children = _ref.children;
|
||||
var onMouseDown = _ref.onMouseDown;
|
||||
var theme = _ref.theme;
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{
|
||||
'data-react-toolbox': 'check',
|
||||
className: (0, _classnames3.default)(theme.check, _defineProperty({}, theme.checked, checked)),
|
||||
onMouseDown: onMouseDown
|
||||
},
|
||||
children
|
||||
);
|
||||
};
|
||||
|
||||
Check.propTypes = {
|
||||
checked: _react.PropTypes.bool,
|
||||
children: _react.PropTypes.any,
|
||||
onMouseDown: _react.PropTypes.func,
|
||||
theme: _react2.default.PropTypes.shape({
|
||||
check: _react2.default.PropTypes.string.isRequired,
|
||||
checked: _react2.default.PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
return ripple(Check);
|
||||
};
|
||||
|
||||
exports.default = factory;
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Checkbox = exports.checkboxFactory = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _Ripple = require('../ripple/Ripple.js');
|
||||
|
||||
var _Ripple2 = _interopRequireDefault(_Ripple);
|
||||
|
||||
var _Check = require('./Check.js');
|
||||
|
||||
var _Check2 = _interopRequireDefault(_Check);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var factory = function factory(Check) {
|
||||
var Checkbox = function (_Component) {
|
||||
_inherits(Checkbox, _Component);
|
||||
|
||||
function Checkbox() {
|
||||
var _Object$getPrototypeO;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, Checkbox);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Checkbox)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
|
||||
if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
|
||||
if (!_this.props.disabled && _this.props.onChange) {
|
||||
_this.props.onChange(!_this.props.checked, event);
|
||||
}
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(Checkbox, [{
|
||||
key: 'blur',
|
||||
value: function blur() {
|
||||
this.refs.input.blur();
|
||||
}
|
||||
}, {
|
||||
key: 'focus',
|
||||
value: function focus() {
|
||||
this.refs.input.focus();
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _props = this.props;
|
||||
var onChange = _props.onChange;
|
||||
var theme = _props.theme;
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['onChange', 'theme']); //eslint-disable-line no-unused-vars
|
||||
|
||||
|
||||
var className = (0, _classnames3.default)(theme.field, _defineProperty({}, theme.disabled, this.props.disabled), this.props.className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'label',
|
||||
{ 'data-react-toolbox': 'checkbox', className: className },
|
||||
_react2.default.createElement('input', _extends({}, others, {
|
||||
className: theme.input,
|
||||
onClick: this.handleToggle,
|
||||
readOnly: true,
|
||||
ref: 'input',
|
||||
type: 'checkbox'
|
||||
})),
|
||||
_react2.default.createElement(Check, {
|
||||
checked: this.props.checked,
|
||||
disabled: this.props.disabled,
|
||||
rippleClassName: theme.ripple,
|
||||
theme: this.props.theme
|
||||
}),
|
||||
this.props.label ? _react2.default.createElement(
|
||||
'span',
|
||||
{ 'data-react-toolbox': 'label', className: theme.text },
|
||||
this.props.label
|
||||
) : null
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Checkbox;
|
||||
}(_react.Component);
|
||||
|
||||
Checkbox.propTypes = {
|
||||
checked: _react.PropTypes.bool,
|
||||
className: _react.PropTypes.string,
|
||||
disabled: _react.PropTypes.bool,
|
||||
label: _react.PropTypes.any,
|
||||
onChange: _react.PropTypes.func,
|
||||
theme: _react.PropTypes.shape({
|
||||
disabled: _react.PropTypes.string.isRequired,
|
||||
field: _react.PropTypes.string.isRequired,
|
||||
input: _react.PropTypes.string.isRequired,
|
||||
ripple: _react.PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
Checkbox.defaultProps = {
|
||||
checked: false,
|
||||
className: '',
|
||||
disabled: false
|
||||
};
|
||||
|
||||
|
||||
return Checkbox;
|
||||
};
|
||||
|
||||
var Check = (0, _Check2.default)((0, _Ripple2.default)({ centered: true, spread: 2.6 }));
|
||||
var Checkbox = factory(Check);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.CHECKBOX)(Checkbox);
|
||||
exports.checkboxFactory = factory;
|
||||
exports.Checkbox = Checkbox;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
$checkbox-color: $color-primary !default;
|
||||
$checkbox-disabled-color: rgba($color-black, 0.26) !default;
|
||||
$checkbox-field-margin-bottom: 1.5 * $unit !default;
|
||||
$checkbox-focus-checked-color: rgba($color-primary, 0.26) !default;
|
||||
$checkbox-ripple-duration: 650ms !default;
|
||||
$checkbox-size: 1.8 * $unit !default;
|
||||
$checkbox-focus-color: rgba($color-black, 0.1) !default;
|
||||
$checkbox-focus-size: $checkbox-size * 2.3 !default;
|
||||
$checkbox-text-color: $color-black !default;
|
||||
$checkbox-text-font-size: $font-size-small !default;
|
||||
$checkbox-total-height: 1.8 * $unit !default;
|
||||
$checkbox-transition-duration: .2s !default;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Checkbox = undefined;
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _ripple = require('../ripple');
|
||||
|
||||
var _ripple2 = _interopRequireDefault(_ripple);
|
||||
|
||||
var _Checkbox = require('./Checkbox.js');
|
||||
|
||||
var _Check = require('./Check.js');
|
||||
|
||||
var _Check2 = _interopRequireDefault(_Check);
|
||||
|
||||
var _theme = require('./theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var ThemedCheck = (0, _Check2.default)((0, _ripple2.default)({ centered: true, spread: 2.6 }));
|
||||
var ThemedCheckbox = (0, _reactCssThemr.themr)(_identifiers.CHECKBOX, _theme2.default)((0, _Checkbox.checkboxFactory)(ThemedCheck));
|
||||
|
||||
exports.default = ThemedCheckbox;
|
||||
exports.Checkbox = ThemedCheckbox;
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
@import "../base";
|
||||
@import "./config";
|
||||
|
||||
.field {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: $checkbox-size;
|
||||
margin-bottom: $checkbox-field-margin-bottom;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
.ripple {
|
||||
background-color: $checkbox-color;
|
||||
opacity: .3;
|
||||
transition-duration: $checkbox-ripple-duration;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
padding-left: $unit;
|
||||
font-size: $checkbox-text-font-size;
|
||||
line-height: $checkbox-size;
|
||||
color: $checkbox-text-color;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
&:focus ~ .check {
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: $checkbox-focus-size;
|
||||
height: $checkbox-focus-size;
|
||||
margin-top: - $checkbox-focus-size / 2;
|
||||
margin-left: - $checkbox-focus-size / 2;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
background-color: $checkbox-focus-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.checked:before {
|
||||
background-color: $checkbox-focus-checked-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.check {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
border-color: $checkbox-text-color;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-radius: 2px;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $checkbox-transition-duration;
|
||||
transition-property: background-color;
|
||||
&.checked {
|
||||
background-color: $checkbox-color;
|
||||
border-color: $checkbox-color;
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: -.1 * $unit;
|
||||
left: .4 * $unit;
|
||||
width: .7 * $unit;
|
||||
height: 1.2 * $unit;
|
||||
content: "";
|
||||
border-color: $color-background;
|
||||
border-style: solid;
|
||||
border-top: 0;
|
||||
border-right-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
border-left: 0;
|
||||
transform: rotate(45deg);
|
||||
animation: checkmark-expand 140ms ease-out forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
> .text {
|
||||
color: $checkbox-disabled-color;
|
||||
}
|
||||
> .check {
|
||||
cursor: auto;
|
||||
border-color: $checkbox-disabled-color;
|
||||
&.checked {
|
||||
cursor: auto;
|
||||
background-color: $checkbox-disabled-color;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkmark-expand {
|
||||
0% {
|
||||
top: .9 * $unit;
|
||||
left: .6 * $unit;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: -.1 * $unit;
|
||||
left: .4 * $unit;
|
||||
width: .7 * $unit;
|
||||
height: 1.2 * $unit;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Chip = exports.chipFactory = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _Avatar = require('../avatar/Avatar.js');
|
||||
|
||||
var _Avatar2 = _interopRequireDefault(_Avatar);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
var factory = function factory(Avatar) {
|
||||
var Chip = function Chip(_ref) {
|
||||
var _classnames;
|
||||
|
||||
var children = _ref.children;
|
||||
var className = _ref.className;
|
||||
var deletable = _ref.deletable;
|
||||
var onDeleteClick = _ref.onDeleteClick;
|
||||
var theme = _ref.theme;
|
||||
|
||||
var other = _objectWithoutProperties(_ref, ['children', 'className', 'deletable', 'onDeleteClick', 'theme']);
|
||||
|
||||
var hasAvatar = false;
|
||||
if (_react2.default.Children.count(children)) {
|
||||
var firstChild = children[0];
|
||||
hasAvatar = firstChild && firstChild.type && firstChild.type === Avatar;
|
||||
}
|
||||
|
||||
var classes = (0, _classnames3.default)(theme.chip, (_classnames = {}, _defineProperty(_classnames, theme.deletable, !!deletable), _defineProperty(_classnames, theme.avatar, !!hasAvatar), _classnames), className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
_extends({ 'data-react-toolbox': 'chip', className: classes }, other),
|
||||
typeof children === 'string' ? _react2.default.createElement(
|
||||
'span',
|
||||
null,
|
||||
children
|
||||
) : children,
|
||||
deletable ? _react2.default.createElement(
|
||||
'span',
|
||||
{ className: theme.delete, onClick: onDeleteClick },
|
||||
_react2.default.createElement(
|
||||
'svg',
|
||||
{ viewBox: '0 0 40 40', className: theme.deleteIcon },
|
||||
_react2.default.createElement('path', { className: theme.deleteX, d: 'M 12,12 L 28,28 M 28,12 L 12,28' })
|
||||
)
|
||||
) : null
|
||||
);
|
||||
};
|
||||
|
||||
Chip.propTypes = {
|
||||
children: _react.PropTypes.node,
|
||||
className: _react.PropTypes.string,
|
||||
deletable: _react.PropTypes.bool,
|
||||
onDeleteClick: _react.PropTypes.func,
|
||||
theme: _react2.default.PropTypes.shape({
|
||||
avatar: _react2.default.PropTypes.string.isRequired,
|
||||
chip: _react2.default.PropTypes.string.isRequired,
|
||||
deletable: _react2.default.PropTypes.string.isRequired,
|
||||
delete: _react2.default.PropTypes.string.isRequired,
|
||||
deleteIcon: _react2.default.PropTypes.string.isRequired,
|
||||
deleteX: _react2.default.PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
Chip.defaultProps = {
|
||||
className: '',
|
||||
deletable: false
|
||||
};
|
||||
|
||||
return Chip;
|
||||
};
|
||||
|
||||
var Chip = factory(_Avatar2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.CHIP)(Chip);
|
||||
exports.chipFactory = factory;
|
||||
exports.Chip = Chip;
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
$chip-height: 3.2 * $unit !default;
|
||||
$chip-padding: 1.2 * $unit !default;
|
||||
$chip-margin-right: 0.25 * $unit !default;
|
||||
$chip-background: $palette-grey-200 !default;
|
||||
|
||||
$chip-icon-font-size: 2 * $unit !default;
|
||||
$chip-icon-margin-right: 0.8 * $unit !default;
|
||||
|
||||
$chip-color: $color-text-secondary !default;
|
||||
$chip-font-size: $font-size-small !default;
|
||||
|
||||
$chip-remove-size: 2.4 * $unit !default;
|
||||
$chip-remove-margin: 0.4 * $unit !default;
|
||||
$chip-remove-stroke-width: 0.4 * $unit !default;
|
||||
$chip-remove-background: $palette-grey-400 !default;
|
||||
$chip-remove-background-hover: $palette-grey-500 !default;
|
||||
$chip-remove-color: $color-white !default;
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Chip = undefined;
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _Chip = require('./Chip.js');
|
||||
|
||||
var _avatar = require('../avatar');
|
||||
|
||||
var _avatar2 = _interopRequireDefault(_avatar);
|
||||
|
||||
var _theme = require('./theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var Chip = (0, _Chip.chipFactory)(_avatar2.default);
|
||||
var ThemedChip = (0, _reactCssThemr.themr)(_identifiers.CHIP, _theme2.default)(Chip);
|
||||
|
||||
exports.default = ThemedChip;
|
||||
exports.Chip = ThemedChip;
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
@import "../base";
|
||||
@import "./config";
|
||||
|
||||
.chip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
padding: 0 $chip-padding;
|
||||
margin-right: $chip-margin-right;
|
||||
overflow: hidden;
|
||||
font-size: $chip-font-size;
|
||||
line-height: $chip-height;
|
||||
color: $chip-color;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background-color: $chip-background;
|
||||
border-radius: $chip-height;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
padding-left: 0;
|
||||
|
||||
> [data-react-toolbox="avatar"] {
|
||||
width: $chip-height;
|
||||
height: $chip-height;
|
||||
margin-right: $chip-icon-margin-right;
|
||||
vertical-align: middle;
|
||||
|
||||
> span {
|
||||
font-size: $chip-icon-font-size;
|
||||
line-height: $chip-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.deletable {
|
||||
padding-right: $chip-remove-size + 2 * $chip-remove-margin;
|
||||
}
|
||||
|
||||
.delete {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: inline-block;
|
||||
width: $chip-remove-size;
|
||||
height: $chip-remove-size;
|
||||
padding: $chip-remove-margin;
|
||||
margin: $chip-remove-margin;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.delete:hover .deleteIcon {
|
||||
background: $chip-remove-background-hover;
|
||||
}
|
||||
|
||||
.deleteIcon {
|
||||
vertical-align: top;
|
||||
background: $chip-remove-background;
|
||||
border-radius: $chip-remove-size;
|
||||
|
||||
.deleteX {
|
||||
fill: transparent;
|
||||
stroke-width: $chip-remove-stroke-width;
|
||||
stroke: $chip-remove-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
@import "./base";
|
||||
@import "~normalize.css";
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 1.6rem;
|
||||
-webkit-touch-callout: none;
|
||||
* {
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
a, abbr, address, article, aside, audio, b, blockquote, body, caption, cite,
|
||||
code, dd, del, dfn, dialog, div, dl, dt, em, fieldset, figure, footer, form, h1,
|
||||
h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label,
|
||||
legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span,
|
||||
strong, sub, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small {
|
||||
font-smoothing: antialiased;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]), button {
|
||||
outline: none;
|
||||
appearance: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
// -- Material design font sizes
|
||||
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
||||
@include typo-display-3($color-contrast: true);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include typo-display-3;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include typo-display-2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include typo-display-1;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include typo-headline;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include typo-title;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@include typo-subhead;
|
||||
}
|
||||
|
||||
p {
|
||||
@include typo-body-1;
|
||||
}
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactAddonsCssTransitionGroup = require('react-addons-css-transition-group');
|
||||
|
||||
var _reactAddonsCssTransitionGroup2 = _interopRequireDefault(_reactAddonsCssTransitionGroup);
|
||||
|
||||
var _animations = require('../animations');
|
||||
|
||||
var _time = require('../utils/time.js');
|
||||
|
||||
var _time2 = _interopRequireDefault(_time);
|
||||
|
||||
var _utils = require('../utils/utils.js');
|
||||
|
||||
var _utils2 = _interopRequireDefault(_utils);
|
||||
|
||||
var _CalendarMonth = require('./CalendarMonth.js');
|
||||
|
||||
var _CalendarMonth2 = _interopRequireDefault(_CalendarMonth);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var factory = function factory(IconButton) {
|
||||
var Calendar = function (_Component) {
|
||||
_inherits(Calendar, _Component);
|
||||
|
||||
function Calendar() {
|
||||
var _Object$getPrototypeO;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, Calendar);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Calendar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
viewDate: _this.props.selectedDate
|
||||
}, _this.handleDayClick = function (day) {
|
||||
_this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);
|
||||
}, _this.handleYearClick = function (year) {
|
||||
var viewDate = _time2.default.setYear(_this.props.selectedDate, year);
|
||||
_this.setState({ viewDate: viewDate });
|
||||
_this.props.onChange(viewDate, false);
|
||||
}, _this.changeViewMonth = function (direction, step) {
|
||||
_this.setState({
|
||||
direction: direction,
|
||||
viewDate: _time2.default.addMonths(_this.state.viewDate, step)
|
||||
});
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(Calendar, [{
|
||||
key: 'componentDidUpdate',
|
||||
value: function componentDidUpdate() {
|
||||
if (this.refs.activeYear) {
|
||||
this.scrollToActive();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'scrollToActive',
|
||||
value: function scrollToActive() {
|
||||
this.refs.years.scrollTop = this.refs.activeYear.offsetTop - this.refs.years.offsetHeight / 2 + this.refs.activeYear.offsetHeight / 2;
|
||||
}
|
||||
}, {
|
||||
key: 'renderYear',
|
||||
value: function renderYear(year) {
|
||||
var props = {
|
||||
className: year === this.state.viewDate.getFullYear() ? this.props.theme.active : '',
|
||||
key: year,
|
||||
onClick: this.handleYearClick.bind(this, year)
|
||||
};
|
||||
|
||||
if (year === this.state.viewDate.getFullYear()) {
|
||||
props.ref = 'activeYear';
|
||||
}
|
||||
|
||||
return _react2.default.createElement(
|
||||
'li',
|
||||
props,
|
||||
year
|
||||
);
|
||||
}
|
||||
}, {
|
||||
key: 'renderYears',
|
||||
value: function renderYears() {
|
||||
var _this2 = this;
|
||||
|
||||
return _react2.default.createElement(
|
||||
'ul',
|
||||
{ 'data-react-toolbox': 'years', ref: 'years', className: this.props.theme.years },
|
||||
_utils2.default.range(1900, 2100).map(function (i) {
|
||||
return _this2.renderYear(i);
|
||||
})
|
||||
);
|
||||
}
|
||||
}, {
|
||||
key: 'renderMonths',
|
||||
value: function renderMonths() {
|
||||
var theme = this.props.theme;
|
||||
|
||||
var animation = this.state.direction === 'left' ? _animations.SlideLeft : _animations.SlideRight;
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'calendar' },
|
||||
_react2.default.createElement(IconButton, { className: theme.prev, icon: 'chevron_left', onClick: this.changeViewMonth.bind(this, 'left', -1) }),
|
||||
_react2.default.createElement(IconButton, { className: theme.next, icon: 'chevron_right', onClick: this.changeViewMonth.bind(this, 'right', 1) }),
|
||||
_react2.default.createElement(
|
||||
_reactAddonsCssTransitionGroup2.default,
|
||||
{ transitionName: animation, transitionEnterTimeout: 350, transitionLeaveTimeout: 350 },
|
||||
_react2.default.createElement(_CalendarMonth2.default, {
|
||||
key: this.state.viewDate.getMonth(),
|
||||
maxDate: this.props.maxDate,
|
||||
minDate: this.props.minDate,
|
||||
onDayClick: this.handleDayClick,
|
||||
selectedDate: this.props.selectedDate,
|
||||
theme: this.props.theme,
|
||||
viewDate: this.state.viewDate
|
||||
})
|
||||
)
|
||||
);
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ className: this.props.theme.calendar },
|
||||
this.props.display === 'months' ? this.renderMonths() : this.renderYears()
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Calendar;
|
||||
}(_react.Component);
|
||||
|
||||
Calendar.propTypes = {
|
||||
display: _react.PropTypes.oneOf(['months', 'years']),
|
||||
maxDate: _react.PropTypes.object,
|
||||
minDate: _react.PropTypes.object,
|
||||
onChange: _react.PropTypes.func,
|
||||
selectedDate: _react.PropTypes.object,
|
||||
theme: _react.PropTypes.shape({
|
||||
active: _react.PropTypes.string.isRequired,
|
||||
calendar: _react.PropTypes.string.isRequired,
|
||||
next: _react.PropTypes.string.isRequired,
|
||||
prev: _react.PropTypes.string.isRequired,
|
||||
years: _react.PropTypes.string.isRequired
|
||||
}),
|
||||
viewDate: _react.PropTypes.object
|
||||
};
|
||||
Calendar.defaultProps = {
|
||||
display: 'months',
|
||||
selectedDate: new Date()
|
||||
};
|
||||
|
||||
|
||||
return Calendar;
|
||||
};
|
||||
|
||||
exports.default = factory;
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _time = require('../utils/time.js');
|
||||
|
||||
var _time2 = _interopRequireDefault(_time);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var Day = function (_Component) {
|
||||
_inherits(Day, _Component);
|
||||
|
||||
function Day() {
|
||||
_classCallCheck(this, Day);
|
||||
|
||||
return _possibleConstructorReturn(this, Object.getPrototypeOf(Day).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(Day, [{
|
||||
key: 'dayStyle',
|
||||
value: function dayStyle() {
|
||||
if (this.props.day === 1) {
|
||||
return {
|
||||
marginLeft: _time2.default.getFirstWeekDay(this.props.viewDate) * 100 / 7 + '%'
|
||||
};
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'isSelected',
|
||||
value: function isSelected() {
|
||||
var sameYear = this.props.viewDate.getFullYear() === this.props.selectedDate.getFullYear();
|
||||
var sameMonth = this.props.viewDate.getMonth() === this.props.selectedDate.getMonth();
|
||||
var sameDay = this.props.day === this.props.selectedDate.getDate();
|
||||
return sameYear && sameMonth && sameDay;
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _classnames;
|
||||
|
||||
var className = (0, _classnames3.default)(this.props.theme.day, (_classnames = {}, _defineProperty(_classnames, this.props.theme.active, this.isSelected()), _defineProperty(_classnames, this.props.theme.disabled, this.props.disabled), _classnames));
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'day', className: className, style: this.dayStyle() },
|
||||
_react2.default.createElement(
|
||||
'span',
|
||||
{ onClick: this.props.onClick },
|
||||
this.props.day
|
||||
)
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Day;
|
||||
}(_react.Component);
|
||||
|
||||
Day.propTypes = {
|
||||
day: _react.PropTypes.number,
|
||||
disabled: _react.PropTypes.bool,
|
||||
onClick: _react.PropTypes.func,
|
||||
selectedDate: _react.PropTypes.object,
|
||||
theme: _react.PropTypes.shape({
|
||||
active: _react.PropTypes.string.isRequired,
|
||||
day: _react.PropTypes.string.isRequired,
|
||||
disabled: _react.PropTypes.string.isRequired
|
||||
}),
|
||||
viewDate: _react.PropTypes.object
|
||||
};
|
||||
exports.default = Day;
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _time = require('../utils/time.js');
|
||||
|
||||
var _time2 = _interopRequireDefault(_time);
|
||||
|
||||
var _utils = require('../utils/utils.js');
|
||||
|
||||
var _utils2 = _interopRequireDefault(_utils);
|
||||
|
||||
var _CalendarDay = require('./CalendarDay.js');
|
||||
|
||||
var _CalendarDay2 = _interopRequireDefault(_CalendarDay);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var Month = function (_Component) {
|
||||
_inherits(Month, _Component);
|
||||
|
||||
function Month() {
|
||||
var _Object$getPrototypeO;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, Month);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Month)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleDayClick = function (day) {
|
||||
if (_this.props.onDayClick) _this.props.onDayClick(day);
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(Month, [{
|
||||
key: 'renderWeeks',
|
||||
value: function renderWeeks() {
|
||||
return _utils2.default.range(0, 7).map(function (i) {
|
||||
return _react2.default.createElement(
|
||||
'span',
|
||||
{ key: i },
|
||||
_time2.default.getFullDayOfWeek(i).charAt(0)
|
||||
);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'renderDays',
|
||||
value: function renderDays() {
|
||||
var _this2 = this;
|
||||
|
||||
return _utils2.default.range(1, _time2.default.getDaysInMonth(this.props.viewDate) + 1).map(function (i) {
|
||||
var date = new Date(_this2.props.viewDate.getFullYear(), _this2.props.viewDate.getMonth(), i);
|
||||
var disabled = _time2.default.dateOutOfRange(date, _this2.props.minDate, _this2.props.maxDate);
|
||||
|
||||
return _react2.default.createElement(_CalendarDay2.default, {
|
||||
key: i,
|
||||
day: i,
|
||||
disabled: disabled,
|
||||
onClick: !disabled ? _this2.handleDayClick.bind(_this2, i) : null,
|
||||
selectedDate: _this2.props.selectedDate,
|
||||
theme: _this2.props.theme,
|
||||
viewDate: _this2.props.viewDate
|
||||
});
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'month', className: this.props.theme.month },
|
||||
_react2.default.createElement(
|
||||
'span',
|
||||
{ className: this.props.theme.title },
|
||||
_time2.default.getFullMonth(this.props.viewDate),
|
||||
' ',
|
||||
this.props.viewDate.getFullYear()
|
||||
),
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: this.props.theme.week },
|
||||
this.renderWeeks()
|
||||
),
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: this.props.theme.days },
|
||||
this.renderDays()
|
||||
)
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Month;
|
||||
}(_react.Component);
|
||||
|
||||
Month.propTypes = {
|
||||
maxDate: _react.PropTypes.object,
|
||||
minDate: _react.PropTypes.object,
|
||||
onDayClick: _react.PropTypes.func,
|
||||
selectedDate: _react.PropTypes.object,
|
||||
theme: _react.PropTypes.shape({
|
||||
days: _react.PropTypes.string.isRequired,
|
||||
month: _react.PropTypes.string.isRequired,
|
||||
title: _react.PropTypes.string.isRequired,
|
||||
week: _react.PropTypes.string.isRequired
|
||||
}),
|
||||
viewDate: _react.PropTypes.object
|
||||
};
|
||||
exports.default = Month;
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.DatePicker = exports.datePickerFactory = undefined;
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _events = require('../utils/events.js');
|
||||
|
||||
var _events2 = _interopRequireDefault(_events);
|
||||
|
||||
var _time = require('../utils/time.js');
|
||||
|
||||
var _time2 = _interopRequireDefault(_time);
|
||||
|
||||
var _IconButton = require('../button/IconButton.js');
|
||||
|
||||
var _IconButton2 = _interopRequireDefault(_IconButton);
|
||||
|
||||
var _Input = require('../input/Input.js');
|
||||
|
||||
var _Input2 = _interopRequireDefault(_Input);
|
||||
|
||||
var _Dialog = require('../dialog/Dialog.js');
|
||||
|
||||
var _Dialog2 = _interopRequireDefault(_Dialog);
|
||||
|
||||
var _Calendar = require('./Calendar.js');
|
||||
|
||||
var _Calendar2 = _interopRequireDefault(_Calendar);
|
||||
|
||||
var _DatePickerDialog = require('./DatePickerDialog.js');
|
||||
|
||||
var _DatePickerDialog2 = _interopRequireDefault(_DatePickerDialog);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var factory = function factory(Input, DatePickerDialog) {
|
||||
var DatePicker = function (_Component) {
|
||||
_inherits(DatePicker, _Component);
|
||||
|
||||
function DatePicker() {
|
||||
var _Object$getPrototypeO;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, DatePicker);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(DatePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
active: false
|
||||
}, _this.handleDismiss = function () {
|
||||
_this.setState({ active: false });
|
||||
}, _this.handleInputMouseDown = function (event) {
|
||||
_events2.default.pauseEvent(event);
|
||||
_this.setState({ active: true });
|
||||
}, _this.handleSelect = function (value, event) {
|
||||
if (_this.props.onChange) _this.props.onChange(value, event);
|
||||
_this.setState({ active: false });
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(DatePicker, [{
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _props = this.props;
|
||||
var inputClassName = _props.inputClassName;
|
||||
var value = _props.value;
|
||||
|
||||
var inputFormat = this.props.inputFormat || _time2.default.formatDate;
|
||||
var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
|
||||
var formattedDate = date === undefined ? '' : inputFormat(value);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'date-picker' },
|
||||
_react2.default.createElement(Input, {
|
||||
className: (0, _classnames3.default)(this.props.theme.input, _defineProperty({}, inputClassName, inputClassName)),
|
||||
error: this.props.error,
|
||||
onMouseDown: this.handleInputMouseDown,
|
||||
label: this.props.label,
|
||||
readOnly: true,
|
||||
type: 'text',
|
||||
icon: this.props.icon,
|
||||
value: formattedDate
|
||||
}),
|
||||
_react2.default.createElement(DatePickerDialog, {
|
||||
autoOk: this.props.autoOk,
|
||||
active: this.state.active,
|
||||
className: this.props.className,
|
||||
maxDate: this.props.maxDate,
|
||||
minDate: this.props.minDate,
|
||||
onDismiss: this.handleDismiss,
|
||||
onSelect: this.handleSelect,
|
||||
theme: this.props.theme,
|
||||
value: date
|
||||
})
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return DatePicker;
|
||||
}(_react.Component);
|
||||
|
||||
DatePicker.propTypes = {
|
||||
autoOk: _react.PropTypes.bool,
|
||||
className: _react.PropTypes.string,
|
||||
error: _react.PropTypes.string,
|
||||
icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
inputClassName: _react.PropTypes.string,
|
||||
inputFormat: _react.PropTypes.func,
|
||||
label: _react.PropTypes.string,
|
||||
maxDate: _react.PropTypes.object,
|
||||
minDate: _react.PropTypes.object,
|
||||
onChange: _react.PropTypes.func,
|
||||
theme: _react.PropTypes.shape({
|
||||
input: _react.PropTypes.string.isRequired
|
||||
}),
|
||||
value: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(Date), _react.PropTypes.string])
|
||||
};
|
||||
|
||||
|
||||
return DatePicker;
|
||||
};
|
||||
|
||||
var Calendar = (0, _Calendar2.default)(_IconButton2.default);
|
||||
var DatePickerDialog = (0, _DatePickerDialog2.default)(_Dialog2.default, Calendar);
|
||||
var DatePicker = factory(_Input2.default, DatePickerDialog);
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.DATE_PICKER)(DatePicker);
|
||||
exports.datePickerFactory = factory;
|
||||
exports.DatePicker = DatePicker;
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames = require('classnames');
|
||||
|
||||
var _classnames2 = _interopRequireDefault(_classnames);
|
||||
|
||||
var _time = require('../utils/time.js');
|
||||
|
||||
var _time2 = _interopRequireDefault(_time);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var factory = function factory(Dialog, Calendar) {
|
||||
var CalendarDialog = function (_Component) {
|
||||
_inherits(CalendarDialog, _Component);
|
||||
|
||||
function CalendarDialog() {
|
||||
var _Object$getPrototypeO;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, CalendarDialog);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(CalendarDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
display: 'months',
|
||||
date: _this.props.value
|
||||
}, _this.handleCalendarChange = function (value, dayClick) {
|
||||
var state = { display: 'months', date: value };
|
||||
if (_time2.default.dateOutOfRange(value, _this.props.minDate, _this.props.maxDate)) {
|
||||
state.date = _this.props.maxDate || _this.props.minDate;
|
||||
}
|
||||
_this.setState(state);
|
||||
if (dayClick && _this.props.autoOk && _this.props.onSelect) {
|
||||
_this.props.onSelect(value);
|
||||
}
|
||||
}, _this.handleSelect = function (event) {
|
||||
if (_this.props.onSelect) _this.props.onSelect(_this.state.date, event);
|
||||
}, _this.handleSwitchDisplay = function (display) {
|
||||
_this.setState({ display: display });
|
||||
}, _this.updateStateDate = function (date) {
|
||||
if (Object.prototype.toString.call(date) === '[object Date]') {
|
||||
_this.setState({
|
||||
date: date
|
||||
});
|
||||
}
|
||||
}, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(CalendarDialog, [{
|
||||
key: 'componentWillMount',
|
||||
value: function componentWillMount() {
|
||||
this.updateStateDate(this.props.value);
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillReceiveProps',
|
||||
value: function componentWillReceiveProps(nextProps) {
|
||||
this.updateStateDate(nextProps.value);
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var theme = this.props.theme;
|
||||
|
||||
var display = this.state.display + 'Display';
|
||||
var className = (0, _classnames2.default)(theme.dialog, this.props.className);
|
||||
var headerClassName = (0, _classnames2.default)(theme.header, theme[display]);
|
||||
|
||||
return _react2.default.createElement(
|
||||
Dialog,
|
||||
{ active: this.props.active, type: 'custom', className: className, actions: this.actions },
|
||||
_react2.default.createElement(
|
||||
'header',
|
||||
{ className: headerClassName },
|
||||
_react2.default.createElement(
|
||||
'span',
|
||||
{ className: theme.year, onClick: this.handleSwitchDisplay.bind(this, 'years') },
|
||||
this.state.date.getFullYear()
|
||||
),
|
||||
_react2.default.createElement(
|
||||
'h3',
|
||||
{ className: theme.date, onClick: this.handleSwitchDisplay.bind(this, 'months') },
|
||||
_time2.default.getShortDayOfWeek(this.state.date.getDay()),
|
||||
', ',
|
||||
_time2.default.getShortMonth(this.state.date),
|
||||
' ',
|
||||
this.state.date.getDate()
|
||||
)
|
||||
),
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: theme.calendarWrapper },
|
||||
_react2.default.createElement(Calendar, {
|
||||
display: this.state.display,
|
||||
maxDate: this.props.maxDate,
|
||||
minDate: this.props.minDate,
|
||||
onChange: this.handleCalendarChange,
|
||||
selectedDate: this.state.date,
|
||||
theme: this.props.theme })
|
||||
)
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return CalendarDialog;
|
||||
}(_react.Component);
|
||||
|
||||
CalendarDialog.propTypes = {
|
||||
active: _react.PropTypes.bool,
|
||||
autoOk: _react.PropTypes.bool,
|
||||
className: _react.PropTypes.string,
|
||||
maxDate: _react.PropTypes.object,
|
||||
minDate: _react.PropTypes.object,
|
||||
onDismiss: _react.PropTypes.func,
|
||||
onSelect: _react.PropTypes.func,
|
||||
theme: _react.PropTypes.shape({
|
||||
button: _react.PropTypes.string.isRequired,
|
||||
calendarWrapper: _react.PropTypes.string.isRequired,
|
||||
date: _react.PropTypes.string.isRequired,
|
||||
dialog: _react.PropTypes.string.isRequired,
|
||||
header: _react.PropTypes.string.isRequired,
|
||||
monthsDisplay: _react.PropTypes.string.isRequired,
|
||||
year: _react.PropTypes.string.isRequired,
|
||||
yearsDisplay: _react.PropTypes.string.isRequired
|
||||
}),
|
||||
value: _react.PropTypes.object
|
||||
};
|
||||
CalendarDialog.defaultProps = {
|
||||
active: false,
|
||||
className: '',
|
||||
value: new Date()
|
||||
};
|
||||
|
||||
|
||||
return CalendarDialog;
|
||||
};
|
||||
|
||||
exports.default = factory;
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
$datepicker-primary: $color-primary !default;
|
||||
$datepicker-primary-contrast: $color-primary-contrast !default;
|
||||
$datepicker-primary-dark: $color-primary-dark !default;
|
||||
$datepicker-primary-color: $datepicker-primary !default;
|
||||
$datepicker-primary-hover-color: rgba($datepicker-primary, .2) !default;
|
||||
$datepicker-primary-contrast-color: $datepicker-primary-contrast !default;
|
||||
$datepicker-primary-dark-color: $datepicker-primary-dark !default;
|
||||
$datepicker-dialog-width: 33 * $unit !default;
|
||||
$datepicker-inactive-opacity: .6 !default;
|
||||
$datepicker-weekday-line-height: 2 * $unit !default;
|
||||
$datepicker-weekday-font-size: $font-size-small !default;
|
||||
$datepicker-month-font-size: $font-size-big !default;
|
||||
$datepicker-day-font-size: 5 * $unit !default;
|
||||
$datepicker-day-line-height: 4 * $unit !default;
|
||||
$datepicker-year-font-size: $font-size-small !default;
|
||||
|
||||
$calendar-primary: $color-primary !default;
|
||||
$calendar-primary-contrast: $color-primary-contrast !default;
|
||||
$calendar-primary-color: $calendar-primary !default;
|
||||
$calendar-primary-contrast-color: $calendar-primary-contrast !default;
|
||||
$calendar-primary-hover-color: rgba($calendar-primary, .21) !default;
|
||||
$calendar-arrows-color: $palette-grey-600 !default;
|
||||
$calendar-arrows-font-size: 2 * $unit !default;
|
||||
$calendar-year-font-size: 2.4 !default;
|
||||
$calendar-day-font-size: 1.3 * $unit !default;
|
||||
$calendar-day-disable-opacity: 0.25 !default;
|
||||
$calendar-row-height: 3 * $unit !default;
|
||||
$calendar-day-padding: .2 * $unit !default;
|
||||
$calendar-title-height: 3.6 * $unit !default;
|
||||
$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding * 12 !default;
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.DatePicker = exports.default = undefined;
|
||||
|
||||
var _DatePicker = require('./DatePicker');
|
||||
|
||||
var _DatePicker2 = _interopRequireDefault(_DatePicker);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _DatePicker3 = require('./DatePicker.js');
|
||||
|
||||
var _DatePickerDialog = require('./DatePickerDialog.js');
|
||||
|
||||
var _DatePickerDialog2 = _interopRequireDefault(_DatePickerDialog);
|
||||
|
||||
var _Calendar = require('./Calendar.js');
|
||||
|
||||
var _Calendar2 = _interopRequireDefault(_Calendar);
|
||||
|
||||
var _button = require('../button');
|
||||
|
||||
var _input = require('../input');
|
||||
|
||||
var _input2 = _interopRequireDefault(_input);
|
||||
|
||||
var _dialog = require('../dialog');
|
||||
|
||||
var _dialog2 = _interopRequireDefault(_dialog);
|
||||
|
||||
var _theme = require('./theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
exports.default = _DatePicker2.default;
|
||||
|
||||
|
||||
var Calendar = (0, _Calendar2.default)(_button.IconButton);
|
||||
var DatePickerDialog = (0, _DatePickerDialog2.default)(_dialog2.default, Calendar);
|
||||
var DatePicker = (0, _DatePicker3.datePickerFactory)(_input2.default, DatePickerDialog);
|
||||
|
||||
var ThemedDatePicker = (0, _reactCssThemr.themr)(_identifiers.DATE_PICKER, _theme2.default)(DatePicker);
|
||||
exports.default = ThemedDatePicker;
|
||||
exports.DatePicker = ThemedDatePicker;
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
@import "../base";
|
||||
@import "./config";
|
||||
|
||||
.input > [role="input"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 1.6 * $unit 2 * $unit;
|
||||
color: $datepicker-primary-contrast-color;
|
||||
cursor: pointer;
|
||||
background-color: $datepicker-primary-color;
|
||||
}
|
||||
|
||||
.year {
|
||||
display: inline-block;
|
||||
font-size: $datepicker-year-font-size;
|
||||
transition: opacity, font-size $animation-duration $animation-curve-default;
|
||||
}
|
||||
|
||||
.date {
|
||||
display: block;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
text-transform: capitalize;
|
||||
transition: opacity $animation-duration $animation-curve-default;
|
||||
}
|
||||
|
||||
.calendarWrapper {
|
||||
padding: $unit .5 * $unit 0;
|
||||
}
|
||||
|
||||
.yearsDisplay {
|
||||
.date {
|
||||
opacity: $datepicker-inactive-opacity;
|
||||
}
|
||||
.year {
|
||||
font-size: $font-size-normal;
|
||||
}
|
||||
}
|
||||
|
||||
.monthsDisplay {
|
||||
.year {
|
||||
opacity: $datepicker-inactive-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
width: $datepicker-dialog-width;
|
||||
> [role="body"] {
|
||||
padding: 0;
|
||||
}
|
||||
> [role="navigation"] > .button {
|
||||
color: $datepicker-primary-color;
|
||||
&:hover {
|
||||
background: $datepicker-primary-hover-color;
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
background: $datepicker-primary-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
position: relative;
|
||||
height: $calendar-total-height;
|
||||
overflow: hidden;
|
||||
font-size: $font-size-small;
|
||||
line-height: $calendar-row-height;
|
||||
text-align: center;
|
||||
background: $calendar-primary-contrast-color;
|
||||
.prev, .next {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: $z-index-high;
|
||||
height: 3.6 * $unit;
|
||||
cursor: pointer;
|
||||
opacity: .7;
|
||||
}
|
||||
.prev {
|
||||
left: 0;
|
||||
}
|
||||
.next {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
line-height: $calendar-row-height;
|
||||
}
|
||||
|
||||
.years {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
font-size: $font-size-big;
|
||||
> li {
|
||||
line-height: 2.4;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
font-size: $calendar-year-font-size;
|
||||
color: $calendar-primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.week {
|
||||
display: flex;
|
||||
height: $calendar-row-height;
|
||||
flex-wrap: wrap;
|
||||
font-size: $calendar-day-font-size;
|
||||
line-height: $calendar-row-height;
|
||||
opacity: .5;
|
||||
> span {
|
||||
flex: 0 0 (100% / 7);
|
||||
}
|
||||
}
|
||||
|
||||
.days {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: $calendar-day-font-size;
|
||||
}
|
||||
|
||||
.day {
|
||||
flex: 0 0 (100% / 7);
|
||||
padding: $calendar-day-padding;
|
||||
> span {
|
||||
display: inline-block;
|
||||
width: $calendar-row-height;
|
||||
height: $calendar-row-height;
|
||||
line-height: $calendar-row-height;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:hover:not(.active):not(.disabled) > span {
|
||||
color: $calendar-primary-contrast-color;
|
||||
background: $calendar-primary-hover-color;
|
||||
}
|
||||
&.active > span {
|
||||
color: $calendar-primary-contrast-color;
|
||||
background: $calendar-primary-color;
|
||||
}
|
||||
&:hover:not(.disabled) > span {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.disabled {
|
||||
opacity: $calendar-day-disable-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.month {
|
||||
background-color: $calendar-primary-contrast-color;
|
||||
}
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.dialogFactory = exports.Dialog = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _classnames3 = require('classnames');
|
||||
|
||||
var _classnames4 = _interopRequireDefault(_classnames3);
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _ActivableRenderer = require('../hoc/ActivableRenderer.js');
|
||||
|
||||
var _ActivableRenderer2 = _interopRequireDefault(_ActivableRenderer);
|
||||
|
||||
var _Button = require('../button/Button.js');
|
||||
|
||||
var _Button2 = _interopRequireDefault(_Button);
|
||||
|
||||
var _Overlay = require('../overlay/Overlay.js');
|
||||
|
||||
var _Overlay2 = _interopRequireDefault(_Overlay);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
var factory = function factory(Overlay, Button) {
|
||||
var Dialog = function Dialog(props) {
|
||||
var actions = props.actions.map(function (action, idx) {
|
||||
var className = (0, _classnames4.default)(props.theme.button, _defineProperty({}, action.className, action.className));
|
||||
return _react2.default.createElement(Button, _extends({ key: idx }, action, { className: className }));
|
||||
});
|
||||
|
||||
var className = (0, _classnames4.default)([props.theme.dialog, props.theme[props.type]], _defineProperty({}, props.theme.active, props.active), props.className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
Overlay,
|
||||
{
|
||||
active: props.active,
|
||||
onClick: props.onOverlayClick,
|
||||
onMouseDown: props.onOverlayMouseDown,
|
||||
onMouseUp: props.onOverlayMouseUp,
|
||||
onMouseMove: props.onOverlayMouseMove,
|
||||
onEscKeyDown: props.onEscKeyDown
|
||||
},
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'dialog', className: className },
|
||||
_react2.default.createElement(
|
||||
'section',
|
||||
{ role: 'body', className: props.theme.body },
|
||||
props.title ? _react2.default.createElement(
|
||||
'h6',
|
||||
{ className: props.theme.title },
|
||||
props.title
|
||||
) : null,
|
||||
props.children
|
||||
),
|
||||
actions.length ? _react2.default.createElement(
|
||||
'nav',
|
||||
{ role: 'navigation', className: props.theme.navigation },
|
||||
actions
|
||||
) : null
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
Dialog.propTypes = {
|
||||
actions: _react.PropTypes.array,
|
||||
active: _react.PropTypes.bool,
|
||||
children: _react.PropTypes.node,
|
||||
className: _react.PropTypes.string,
|
||||
onEscKeyDown: _react.PropTypes.func,
|
||||
onOverlayClick: _react.PropTypes.func,
|
||||
onOverlayMouseDown: _react.PropTypes.func,
|
||||
onOverlayMouseMove: _react.PropTypes.func,
|
||||
onOverlayMouseUp: _react.PropTypes.func,
|
||||
theme: _react.PropTypes.shape({
|
||||
active: _react.PropTypes.string.isRequired,
|
||||
body: _react.PropTypes.string.isRequired,
|
||||
button: _react.PropTypes.string.isRequired,
|
||||
dialog: _react.PropTypes.string.isRequired,
|
||||
navigation: _react.PropTypes.string.isRequired,
|
||||
title: _react.PropTypes.string.isRequired
|
||||
}),
|
||||
title: _react.PropTypes.string,
|
||||
type: _react.PropTypes.string
|
||||
};
|
||||
|
||||
Dialog.defaultProps = {
|
||||
actions: [],
|
||||
active: false,
|
||||
type: 'normal'
|
||||
};
|
||||
|
||||
return (0, _ActivableRenderer2.default)()(Dialog);
|
||||
};
|
||||
|
||||
var Dialog = factory(_Overlay2.default, _Button2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.DIALOG)(Dialog);
|
||||
exports.Dialog = Dialog;
|
||||
exports.dialogFactory = factory;
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
$dialog-border-radius: .2 * $unit !default;
|
||||
$dialog-color-title: $color-black !default;
|
||||
$dialog-color-white: $color-white !default;
|
||||
$dialog-content-padding: 2.4 * $unit !default;
|
||||
$dialog-navigation-padding: .8 * $unit !default;
|
||||
$dialog-translate-y: 4 * $unit !default;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Dialog = undefined;
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _Dialog = require('./Dialog.js');
|
||||
|
||||
var _overlay = require('../overlay');
|
||||
|
||||
var _overlay2 = _interopRequireDefault(_overlay);
|
||||
|
||||
var _button = require('../button');
|
||||
|
||||
var _button2 = _interopRequireDefault(_button);
|
||||
|
||||
var _theme = require('./theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var Dialog = (0, _Dialog.dialogFactory)(_overlay2.default, _button2.default);
|
||||
var ThemedDialog = (0, _reactCssThemr.themr)(_identifiers.DIALOG, _theme2.default)(Dialog);
|
||||
|
||||
exports.default = ThemedDialog;
|
||||
exports.Dialog = ThemedDialog;
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
@import "../base";
|
||||
@import "./config";
|
||||
|
||||
.dialog {
|
||||
display: flex;
|
||||
max-width: 96vw;
|
||||
max-height: 96vh;
|
||||
flex-direction: column;
|
||||
background-color: $dialog-color-white;
|
||||
border-radius: $dialog-border-radius;
|
||||
box-shadow: $zdepth-shadow-5;
|
||||
opacity: 0;
|
||||
transition-delay: $animation-delay;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: opacity, transform;
|
||||
transform: translateY(-$dialog-translate-y);
|
||||
&.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
width: 30vw;
|
||||
|
||||
@media screen and (max-width: $layout-breakpoint-sm-tablet) {
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $layout-breakpoint-xs) {
|
||||
width: 75vw;
|
||||
}
|
||||
}
|
||||
|
||||
.normal {
|
||||
width: 50vw;
|
||||
|
||||
@media screen and (max-width: $layout-breakpoint-xs) {
|
||||
width: 96vw;
|
||||
}
|
||||
}
|
||||
|
||||
.large {
|
||||
width: 96vw;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include typo-title();
|
||||
flex-grow: 0;
|
||||
margin-bottom: 1.6 * $unit;
|
||||
color: $dialog-color-title;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex-grow: 2;
|
||||
padding: $dialog-content-padding;
|
||||
overflow-y: auto;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
flex-grow: 0;
|
||||
padding: $dialog-navigation-padding;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.button {
|
||||
min-width: 0;
|
||||
padding-right: $dialog-navigation-padding;
|
||||
padding-left: $dialog-navigation-padding;
|
||||
margin-left: $dialog-navigation-padding;
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Drawer = exports.drawerFactory = undefined;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _ActivableRenderer = require('../hoc/ActivableRenderer.js');
|
||||
|
||||
var _ActivableRenderer2 = _interopRequireDefault(_ActivableRenderer);
|
||||
|
||||
var _Overlay = require('../overlay/Overlay.js');
|
||||
|
||||
var _Overlay2 = _interopRequireDefault(_Overlay);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
var factory = function factory(Overlay) {
|
||||
var Drawer = function Drawer(_ref) {
|
||||
var active = _ref.active;
|
||||
var children = _ref.children;
|
||||
var className = _ref.className;
|
||||
var onOverlayClick = _ref.onOverlayClick;
|
||||
var theme = _ref.theme;
|
||||
var type = _ref.type;
|
||||
|
||||
var _className = (0, _classnames3.default)([theme.drawer, theme[type]], _defineProperty({}, theme.active, active), className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
Overlay,
|
||||
{ active: active, onClick: onOverlayClick },
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'drawer', className: _className },
|
||||
_react2.default.createElement(
|
||||
'aside',
|
||||
{ className: theme.content },
|
||||
children
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
Drawer.propTypes = {
|
||||
active: _react.PropTypes.bool,
|
||||
children: _react.PropTypes.node,
|
||||
className: _react.PropTypes.string,
|
||||
onOverlayClick: _react.PropTypes.func,
|
||||
theme: _react.PropTypes.shape({
|
||||
active: _react.PropTypes.string.isRequired,
|
||||
content: _react.PropTypes.string.isRequired,
|
||||
drawer: _react.PropTypes.string.isRequired,
|
||||
left: _react.PropTypes.string.isRequired,
|
||||
right: _react.PropTypes.string.isRequired
|
||||
}),
|
||||
type: _react.PropTypes.oneOf(['left', 'right'])
|
||||
};
|
||||
|
||||
Drawer.defaultProps = {
|
||||
active: false,
|
||||
className: '',
|
||||
type: 'left'
|
||||
};
|
||||
|
||||
return (0, _ActivableRenderer2.default)()(Drawer);
|
||||
};
|
||||
|
||||
var Drawer = factory(_Overlay2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.DRAWER)(Drawer);
|
||||
exports.drawerFactory = factory;
|
||||
exports.Drawer = Drawer;
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
$drawer-background-color: $palette-grey-50 !default;
|
||||
$drawer-border-color: $palette-grey-300 !default;
|
||||
$drawer-text-color: $palette-grey-800 !default;
|
||||
$drawer-width: 24 * $unit !default;
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Drawer = undefined;
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _overlay = require('../overlay');
|
||||
|
||||
var _Drawer = require('./Drawer.js');
|
||||
|
||||
var _theme = require('./theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var Drawer = (0, _Drawer.drawerFactory)(_overlay.Overlay);
|
||||
var ThemedDrawer = (0, _reactCssThemr.themr)(_identifiers.DRAWER, _theme2.default)(Drawer);
|
||||
|
||||
exports.default = ThemedDrawer;
|
||||
exports.Drawer = ThemedDrawer;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
@import "../base";
|
||||
@import "./config";
|
||||
|
||||
.drawer {
|
||||
@include shadow-2dp();
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: $drawer-width;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
color: $drawer-text-color;
|
||||
pointer-events: none;
|
||||
background-color: $drawer-background-color;
|
||||
transition-delay: 0s;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: transform;
|
||||
transform-style: preserve-3d;
|
||||
will-change: transform;
|
||||
&.active {
|
||||
pointer-events: all;
|
||||
transition-delay: $animation-delay;
|
||||
transform: translateX(0);
|
||||
}
|
||||
&.right {
|
||||
right: 0;
|
||||
border-left: 1px solid $drawer-border-color;
|
||||
&:not(.active) {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
&.left {
|
||||
left: 0;
|
||||
border-right: 1px solid $drawer-border-color;
|
||||
&:not(.active) {
|
||||
transform: translateX(- 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Dropdown = exports.dropdownFactory = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactDom = require('react-dom');
|
||||
|
||||
var _reactDom2 = _interopRequireDefault(_reactDom);
|
||||
|
||||
var _classnames3 = require('classnames');
|
||||
|
||||
var _classnames4 = _interopRequireDefault(_classnames3);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _Input = require('../input/Input.js');
|
||||
|
||||
var _Input2 = _interopRequireDefault(_Input);
|
||||
|
||||
var _events = require('../utils/events.js');
|
||||
|
||||
var _events2 = _interopRequireDefault(_events);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var factory = function factory(Input) {
|
||||
var Dropdown = function (_Component) {
|
||||
_inherits(Dropdown, _Component);
|
||||
|
||||
function Dropdown() {
|
||||
var _Object$getPrototypeO;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, Dropdown);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Dropdown)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
active: false,
|
||||
up: false
|
||||
}, _this.close = function () {
|
||||
if (_this.state.active) {
|
||||
_this.setState({ active: false });
|
||||
}
|
||||
}, _this.handleDocumentClick = function (event) {
|
||||
if (_this.state.active && !_events2.default.targetIsDescendant(event, _reactDom2.default.findDOMNode(_this))) {
|
||||
_this.setState({ active: false });
|
||||
}
|
||||
}, _this.handleMouseDown = function (event) {
|
||||
_events2.default.pauseEvent(event);
|
||||
var client = event.target.getBoundingClientRect();
|
||||
var screen_height = window.innerHeight || document.documentElement.offsetHeight;
|
||||
var up = _this.props.auto ? client.top > screen_height / 2 + client.height : false;
|
||||
if (_this.props.onFocus) _this.props.onFocus(event);
|
||||
_this.setState({ active: true, up: up });
|
||||
}, _this.handleSelect = function (item, event) {
|
||||
if (_this.props.onBlur) _this.props.onBlur(event);
|
||||
if (!_this.props.disabled && _this.props.onChange) {
|
||||
_this.props.onChange(item, event);
|
||||
_this.setState({ active: false });
|
||||
}
|
||||
}, _this.getSelectedItem = function () {
|
||||
var _iteratorNormalCompletion = true;
|
||||
var _didIteratorError = false;
|
||||
var _iteratorError = undefined;
|
||||
|
||||
try {
|
||||
for (var _iterator = _this.props.source[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||||
var item = _step.value;
|
||||
|
||||
if (item.value === _this.props.value) return item;
|
||||
}
|
||||
} catch (err) {
|
||||
_didIteratorError = true;
|
||||
_iteratorError = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion && _iterator.return) {
|
||||
_iterator.return();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError) {
|
||||
throw _iteratorError;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!_this.props.allowBlank) {
|
||||
return _this.props.source[0];
|
||||
}
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(Dropdown, [{
|
||||
key: 'componentWillUpdate',
|
||||
value: function componentWillUpdate(nextProps, nextState) {
|
||||
if (!this.state.active && nextState.active) {
|
||||
_events2.default.addEventsToDocument({ click: this.handleDocumentClick });
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentDidUpdate',
|
||||
value: function componentDidUpdate(prevProps, prevState) {
|
||||
if (prevState.active && !this.state.active) {
|
||||
_events2.default.removeEventsFromDocument({ click: this.handleDocumentClick });
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillUnmount',
|
||||
value: function componentWillUnmount() {
|
||||
if (this.state.active) {
|
||||
_events2.default.removeEventsFromDocument({ click: this.handleDocumentClick });
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'renderTemplateValue',
|
||||
value: function renderTemplateValue(selected) {
|
||||
var _classnames;
|
||||
|
||||
var theme = this.props.theme;
|
||||
|
||||
var className = (0, _classnames4.default)(theme.field, (_classnames = {}, _defineProperty(_classnames, theme.errored, this.props.error), _defineProperty(_classnames, theme.disabled, this.props.disabled), _classnames));
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ className: className, onMouseDown: this.handleMouseDown },
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: theme.templateValue + ' ' + theme.value },
|
||||
this.props.template(selected)
|
||||
),
|
||||
this.props.label ? _react2.default.createElement(
|
||||
'label',
|
||||
{ className: theme.label },
|
||||
this.props.label
|
||||
) : null,
|
||||
this.props.error ? _react2.default.createElement(
|
||||
'span',
|
||||
{ className: theme.error },
|
||||
this.props.error
|
||||
) : null
|
||||
);
|
||||
}
|
||||
}, {
|
||||
key: 'renderValue',
|
||||
value: function renderValue(item, idx) {
|
||||
var theme = this.props.theme;
|
||||
|
||||
var className = item.value === this.props.value ? theme.selected : null;
|
||||
return _react2.default.createElement(
|
||||
'li',
|
||||
{ key: idx, className: className, onMouseDown: this.handleSelect.bind(this, item.value) },
|
||||
this.props.template ? this.props.template(item) : item.label
|
||||
);
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _classnames2;
|
||||
|
||||
var _props = this.props;
|
||||
var template = _props.template;
|
||||
var theme = _props.theme;
|
||||
var source = _props.source;
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['template', 'theme', 'source']);
|
||||
|
||||
var selected = this.getSelectedItem();
|
||||
var className = (0, _classnames4.default)(theme.dropdown, (_classnames2 = {}, _defineProperty(_classnames2, theme.up, this.state.up), _defineProperty(_classnames2, theme.active, this.state.active), _defineProperty(_classnames2, theme.disabled, this.props.disabled), _classnames2), this.props.className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'dropdown', className: className },
|
||||
_react2.default.createElement(Input, _extends({}, others, {
|
||||
className: theme.value,
|
||||
onMouseDown: this.handleMouseDown,
|
||||
readOnly: true,
|
||||
type: template && selected ? 'hidden' : null,
|
||||
value: selected && selected.label
|
||||
})),
|
||||
template && selected ? this.renderTemplateValue(selected) : null,
|
||||
_react2.default.createElement(
|
||||
'ul',
|
||||
{ className: theme.values, ref: 'values' },
|
||||
source.map(this.renderValue.bind(this))
|
||||
)
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Dropdown;
|
||||
}(_react.Component);
|
||||
|
||||
Dropdown.propTypes = {
|
||||
allowBlank: _react.PropTypes.bool,
|
||||
auto: _react.PropTypes.bool,
|
||||
className: _react.PropTypes.string,
|
||||
disabled: _react.PropTypes.bool,
|
||||
error: _react.PropTypes.string,
|
||||
label: _react.PropTypes.string,
|
||||
onBlur: _react.PropTypes.func,
|
||||
onChange: _react.PropTypes.func,
|
||||
onFocus: _react.PropTypes.func,
|
||||
source: _react.PropTypes.array.isRequired,
|
||||
template: _react.PropTypes.func,
|
||||
theme: _react.PropTypes.shape({
|
||||
active: _react.PropTypes.string.isRequired,
|
||||
disabled: _react.PropTypes.string.isRequired,
|
||||
dropdown: _react.PropTypes.string.isRequired,
|
||||
error: _react.PropTypes.string.isRequired,
|
||||
errored: _react.PropTypes.string.isRequired,
|
||||
field: _react.PropTypes.string.isRequired,
|
||||
label: _react.PropTypes.string.isRequired,
|
||||
selected: _react.PropTypes.string.isRequired,
|
||||
templateValue: _react.PropTypes.string.isRequired,
|
||||
up: _react.PropTypes.string.isRequired,
|
||||
value: _react.PropTypes.string.isRequired,
|
||||
values: _react.PropTypes.string.isRequired
|
||||
}),
|
||||
value: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number])
|
||||
};
|
||||
Dropdown.defaultProps = {
|
||||
auto: true,
|
||||
className: '',
|
||||
allowBlank: true,
|
||||
disabled: false
|
||||
};
|
||||
|
||||
|
||||
return Dropdown;
|
||||
};
|
||||
|
||||
var Dropdown = factory(_Input2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.DROPDOWN)(Dropdown);
|
||||
exports.dropdownFactory = factory;
|
||||
exports.Dropdown = Dropdown;
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
$dropdown-color-white: $color-white !default;
|
||||
$dropdown-color-primary: $color-primary !default;
|
||||
$dropdown-color-primary-contrast: $color-primary-contrast !default;
|
||||
$dropdown-value-hover-background: $palette-grey-200 !default;
|
||||
$dropdown-overflow-max-height: 45vh !default;
|
||||
$dropdown-value-border-radius: .2 * $unit !default;
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Dropdown = undefined;
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _Dropdown = require('./Dropdown.js');
|
||||
|
||||
var _input = require('../input');
|
||||
|
||||
var _theme = require('./theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var Dropdown = (0, _Dropdown.dropdownFactory)(_input.Input);
|
||||
var ThemedDropdown = (0, _reactCssThemr.themr)(_identifiers.DROPDOWN, _theme2.default)(Dropdown);
|
||||
|
||||
exports.default = ThemedDropdown;
|
||||
exports.Dropdown = ThemedDropdown;
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
@import "../base";
|
||||
@import "../input/config";
|
||||
@import "./config";
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
&:not(.active) {
|
||||
> .values {
|
||||
max-height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
> .label, > .value {
|
||||
opacity: .5;
|
||||
}
|
||||
> .values {
|
||||
max-height: $dropdown-overflow-max-height;
|
||||
visibility: visible;
|
||||
box-shadow: $zdepth-shadow-1;
|
||||
}
|
||||
}
|
||||
&:not(.up) > .values {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
&.up > .values {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
cursor: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
> input {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:after {
|
||||
$size: ($input-field-height / 7);
|
||||
$border: $size solid transparent;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $input-chevron-offset;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border-top: $size solid $input-text-bottom-border-color;
|
||||
border-right: $border;
|
||||
border-left: $border;
|
||||
transition: transform $animation-duration $animation-curve-default;
|
||||
}
|
||||
}
|
||||
.field {
|
||||
position: relative;
|
||||
padding: $input-padding 0;
|
||||
cursor: pointer;
|
||||
&.errored {
|
||||
padding-bottom: 0;
|
||||
> .label {
|
||||
color: $input-text-error-color;
|
||||
}
|
||||
> .templateValue {
|
||||
border-bottom: 1px solid $input-text-error-color;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
cursor: normal;
|
||||
> .templateValue {
|
||||
border-bottom-style: dotted;
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.templateValue {
|
||||
position: relative;
|
||||
min-height: $input-field-height;
|
||||
padding: $input-field-padding 0;
|
||||
color: $color-text;
|
||||
background-color: $input-text-background-color;
|
||||
border-bottom: 1px solid $input-text-bottom-border-color;
|
||||
}
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: $input-focus-label-top;
|
||||
left: 0;
|
||||
font-size: $input-label-font-size;
|
||||
line-height: $input-field-font-size;
|
||||
color: $input-text-label-color;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin-bottom: - $input-underline-height;
|
||||
font-size: $input-label-font-size;
|
||||
line-height: $input-underline-height;
|
||||
color: $input-text-error-color;
|
||||
}
|
||||
|
||||
.values {
|
||||
@include no-webkit-scrollbar;
|
||||
position: absolute;
|
||||
z-index: $z-index-high;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
background-color: $dropdown-color-white;
|
||||
border-radius: $dropdown-value-border-radius;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: max-height, box-shadow;
|
||||
> * {
|
||||
position: relative;
|
||||
padding: $unit;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: $dropdown-value-hover-background;
|
||||
}
|
||||
&.selected {
|
||||
color: $dropdown-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.FontIcon = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames = require('classnames');
|
||||
|
||||
var _classnames2 = _interopRequireDefault(_classnames);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
var FontIcon = function FontIcon(_ref) {
|
||||
var children = _ref.children;
|
||||
var className = _ref.className;
|
||||
var value = _ref.value;
|
||||
|
||||
var other = _objectWithoutProperties(_ref, ['children', 'className', 'value']);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'span',
|
||||
_extends({
|
||||
'data-react-toolbox': 'font-icon',
|
||||
className: (0, _classnames2.default)({ 'material-icons': typeof value === 'string' }, className)
|
||||
}, other),
|
||||
value,
|
||||
children
|
||||
);
|
||||
};
|
||||
|
||||
FontIcon.propTypes = {
|
||||
children: _react.PropTypes.any,
|
||||
className: _react.PropTypes.string,
|
||||
value: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element])
|
||||
};
|
||||
|
||||
FontIcon.defaultProps = {
|
||||
className: ''
|
||||
};
|
||||
|
||||
exports.default = FontIcon;
|
||||
exports.FontIcon = FontIcon;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.FontIcon = undefined;
|
||||
|
||||
var _FontIcon = require('./FontIcon.js');
|
||||
|
||||
var _FontIcon2 = _interopRequireDefault(_FontIcon);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
exports.default = _FontIcon2.default;
|
||||
exports.FontIcon = _FontIcon2.default;
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Form = exports.formFactory = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _Autocomplete = require('../autocomplete/Autocomplete.js');
|
||||
|
||||
var _Autocomplete2 = _interopRequireDefault(_Autocomplete);
|
||||
|
||||
var _Button = require('../button/Button.js');
|
||||
|
||||
var _Button2 = _interopRequireDefault(_Button);
|
||||
|
||||
var _Checkbox = require('../checkbox/Checkbox.js');
|
||||
|
||||
var _Checkbox2 = _interopRequireDefault(_Checkbox);
|
||||
|
||||
var _DatePicker = require('../date_picker/DatePicker.js');
|
||||
|
||||
var _DatePicker2 = _interopRequireDefault(_DatePicker);
|
||||
|
||||
var _Dropdown = require('../dropdown/Dropdown.js');
|
||||
|
||||
var _Dropdown2 = _interopRequireDefault(_Dropdown);
|
||||
|
||||
var _Input = require('../input/Input.js');
|
||||
|
||||
var _Input2 = _interopRequireDefault(_Input);
|
||||
|
||||
var _RadioGroup = require('../radio/RadioGroup.js');
|
||||
|
||||
var _RadioGroup2 = _interopRequireDefault(_RadioGroup);
|
||||
|
||||
var _Slider = require('../slider/Slider.js');
|
||||
|
||||
var _Slider2 = _interopRequireDefault(_Slider);
|
||||
|
||||
var _Switch = require('../switch/Switch.js');
|
||||
|
||||
var _Switch2 = _interopRequireDefault(_Switch);
|
||||
|
||||
var _TimePicker = require('../time_picker/TimePicker.js');
|
||||
|
||||
var _TimePicker2 = _interopRequireDefault(_TimePicker);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropdown, Input, RadioGroup, Slider, Switch, TimePicker) {
|
||||
|
||||
var COMPONENTS = {
|
||||
'autocomplete': Autocomplete,
|
||||
'button': Button,
|
||||
'checkbox': Checkbox,
|
||||
'datepicker': DatePicker,
|
||||
'dropdown': Dropdown,
|
||||
'input': Input,
|
||||
'radioGroup': RadioGroup,
|
||||
'slider': Slider,
|
||||
'switch': Switch,
|
||||
'timepicker': TimePicker
|
||||
};
|
||||
|
||||
var Form = function (_Component) {
|
||||
_inherits(Form, _Component);
|
||||
|
||||
function Form() {
|
||||
var _Object$getPrototypeO;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, Form);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Form)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.onSubmit = function (event) {
|
||||
event.preventDefault();
|
||||
if (_this.props.onSubmit) _this.props.onSubmit(event);
|
||||
}, _this.onChange = function (field, value, event) {
|
||||
if (_this.props.onChange) _this.props.onChange(field, value, event);
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(Form, [{
|
||||
key: 'renderFields',
|
||||
value: function renderFields() {
|
||||
var _this2 = this;
|
||||
|
||||
return Object.keys(this.props.model).map(function (field, index) {
|
||||
var properties = _this2.props.model[field];
|
||||
var Field = COMPONENTS[properties.kind.toLowerCase()];
|
||||
return _react2.default.createElement(Field, _extends({ key: index }, properties, { onChange: _this2.onChange.bind(_this2, field) }));
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
return _react2.default.createElement(
|
||||
'form',
|
||||
{ 'data-react-toolbox': 'form', className: this.props.className, onSubmit: this.onSubmit },
|
||||
this.renderFields(),
|
||||
this.props.children
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Form;
|
||||
}(_react.Component);
|
||||
|
||||
Form.propTypes = {
|
||||
attributes: _react.PropTypes.array,
|
||||
children: _react.PropTypes.node,
|
||||
className: _react.PropTypes.string,
|
||||
model: _react.PropTypes.object,
|
||||
onChange: _react.PropTypes.func,
|
||||
onError: _react.PropTypes.func,
|
||||
onSubmit: _react.PropTypes.func,
|
||||
onValid: _react.PropTypes.func,
|
||||
storage: _react.PropTypes.string
|
||||
};
|
||||
Form.defaultProps = {
|
||||
attributes: [],
|
||||
className: ''
|
||||
};
|
||||
|
||||
|
||||
return Form;
|
||||
};
|
||||
|
||||
var Form = factory(_Autocomplete2.default, _Button2.default, _Checkbox2.default, _DatePicker2.default, _Dropdown2.default, _Input2.default, _RadioGroup2.default, _Slider2.default, _Switch2.default, _TimePicker2.default);
|
||||
|
||||
exports.default = Form;
|
||||
exports.formFactory = factory;
|
||||
exports.Form = Form;
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Form = undefined;
|
||||
|
||||
var _Form = require('./Form.js');
|
||||
|
||||
var _autocomplete = require('../autocomplete');
|
||||
|
||||
var _autocomplete2 = _interopRequireDefault(_autocomplete);
|
||||
|
||||
var _button = require('../button');
|
||||
|
||||
var _button2 = _interopRequireDefault(_button);
|
||||
|
||||
var _checkbox = require('../checkbox');
|
||||
|
||||
var _checkbox2 = _interopRequireDefault(_checkbox);
|
||||
|
||||
var _date_picker = require('../date_picker');
|
||||
|
||||
var _date_picker2 = _interopRequireDefault(_date_picker);
|
||||
|
||||
var _dropdown = require('../dropdown');
|
||||
|
||||
var _dropdown2 = _interopRequireDefault(_dropdown);
|
||||
|
||||
var _input = require('../input');
|
||||
|
||||
var _input2 = _interopRequireDefault(_input);
|
||||
|
||||
var _radio = require('../radio');
|
||||
|
||||
var _radio2 = _interopRequireDefault(_radio);
|
||||
|
||||
var _slider = require('../slider');
|
||||
|
||||
var _slider2 = _interopRequireDefault(_slider);
|
||||
|
||||
var _switch = require('../switch');
|
||||
|
||||
var _switch2 = _interopRequireDefault(_switch);
|
||||
|
||||
var _time_picker = require('../time_picker');
|
||||
|
||||
var _time_picker2 = _interopRequireDefault(_time_picker);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var ThemedForm = (0, _Form.formFactory)(_autocomplete2.default, _button2.default, _checkbox2.default, _date_picker2.default, _dropdown2.default, _input2.default, _radio2.default, _slider2.default, _switch2.default, _time_picker2.default);
|
||||
|
||||
exports.default = ThemedForm;
|
||||
exports.Form = ThemedForm;
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var ActivableRendererFactory = function ActivableRendererFactory() {
|
||||
var options = arguments.length <= 0 || arguments[0] === undefined ? { delay: 500 } : arguments[0];
|
||||
return function (ActivableComponent) {
|
||||
var _class, _temp2;
|
||||
|
||||
return _temp2 = _class = function (_Component) {
|
||||
_inherits(ActivableRenderer, _Component);
|
||||
|
||||
function ActivableRenderer() {
|
||||
var _Object$getPrototypeO;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, ActivableRenderer);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ActivableRenderer)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
active: _this.props.active,
|
||||
rendered: _this.props.active
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(ActivableRenderer, [{
|
||||
key: 'componentWillReceiveProps',
|
||||
value: function componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.active && !this.props.active) this.renderAndActivate();
|
||||
if (!nextProps.active && this.props.active) this.deactivateAndUnrender();
|
||||
}
|
||||
}, {
|
||||
key: 'renderAndActivate',
|
||||
value: function renderAndActivate() {
|
||||
var _this2 = this;
|
||||
|
||||
if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
|
||||
this.setState({ rendered: true, active: false }, function () {
|
||||
setTimeout(function () {
|
||||
return _this2.setState({ active: true });
|
||||
}, 20);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'deactivateAndUnrender',
|
||||
value: function deactivateAndUnrender() {
|
||||
var _this3 = this;
|
||||
|
||||
this.setState({ rendered: true, active: false }, function () {
|
||||
_this3.unrenderTimeout = setTimeout(function () {
|
||||
_this3.setState({ rendered: false });
|
||||
_this3.unrenderTimeout = null;
|
||||
}, _this3.props.delay);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _props = this.props;
|
||||
var delay = _props.delay;
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['delay']); // eslint-disable-line no-unused-vars
|
||||
|
||||
|
||||
var _state = this.state;
|
||||
var active = _state.active;
|
||||
var rendered = _state.rendered;
|
||||
|
||||
return rendered ? _react2.default.createElement(ActivableComponent, _extends({}, others, { active: active })) : null;
|
||||
}
|
||||
}]);
|
||||
|
||||
return ActivableRenderer;
|
||||
}(_react.Component), _class.propTypes = {
|
||||
active: _react.PropTypes.bool.isRequired,
|
||||
children: _react.PropTypes.any,
|
||||
delay: _react.PropTypes.number
|
||||
}, _class.defaultProps = {
|
||||
delay: options.delay
|
||||
}, _temp2;
|
||||
};
|
||||
};
|
||||
|
||||
exports.default = ActivableRendererFactory;
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactDom = require('react-dom');
|
||||
|
||||
var _reactDom2 = _interopRequireDefault(_reactDom);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var Portal = function (_Component) {
|
||||
_inherits(Portal, _Component);
|
||||
|
||||
function Portal() {
|
||||
_classCallCheck(this, Portal);
|
||||
|
||||
return _possibleConstructorReturn(this, Object.getPrototypeOf(Portal).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(Portal, [{
|
||||
key: 'componentDidMount',
|
||||
value: function componentDidMount() {
|
||||
this._renderOverlay();
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillReceiveProps',
|
||||
value: function componentWillReceiveProps(nextProps) {
|
||||
if (this._overlayTarget && nextProps.container !== this.props.container) {
|
||||
this._portalContainerNode.removeChild(this._overlayTarget);
|
||||
this._portalContainerNode = getContainer(nextProps.container);
|
||||
this._portalContainerNode.appendChild(this._overlayTarget);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentDidUpdate',
|
||||
value: function componentDidUpdate() {
|
||||
this._renderOverlay();
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillUnmount',
|
||||
value: function componentWillUnmount() {
|
||||
this._unrenderOverlay();
|
||||
this._unmountOverlayTarget();
|
||||
}
|
||||
}, {
|
||||
key: '_mountOverlayTarget',
|
||||
value: function _mountOverlayTarget() {
|
||||
if (!this._overlayTarget) {
|
||||
this._overlayTarget = document.createElement('div');
|
||||
this._portalContainerNode = getContainer(this.props.container);
|
||||
this._portalContainerNode.appendChild(this._overlayTarget);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_unmountOverlayTarget',
|
||||
value: function _unmountOverlayTarget() {
|
||||
if (this._overlayTarget) {
|
||||
this._portalContainerNode.removeChild(this._overlayTarget);
|
||||
this._overlayTarget = null;
|
||||
}
|
||||
this._portalContainerNode = null;
|
||||
}
|
||||
}, {
|
||||
key: '_renderOverlay',
|
||||
value: function _renderOverlay() {
|
||||
var overlay = !this.props.children ? null : _react2.default.Children.only(this.props.children);
|
||||
|
||||
if (overlay !== null) {
|
||||
this._mountOverlayTarget();
|
||||
this._overlayInstance = _reactDom2.default.unstable_renderSubtreeIntoContainer(this, overlay, this._overlayTarget);
|
||||
} else {
|
||||
this._unrenderOverlay();
|
||||
this._unmountOverlayTarget();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_unrenderOverlay',
|
||||
value: function _unrenderOverlay() {
|
||||
if (this._overlayTarget) {
|
||||
_reactDom2.default.unmountComponentAtNode(this._overlayTarget);
|
||||
this._overlayInstance = null;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'getMountNode',
|
||||
value: function getMountNode() {
|
||||
return this._overlayTarget;
|
||||
}
|
||||
}, {
|
||||
key: 'getOverlayDOMNode',
|
||||
value: function getOverlayDOMNode() {
|
||||
if (!this.isMounted()) {
|
||||
throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
|
||||
}
|
||||
|
||||
if (this._overlayInstance) {
|
||||
if (this._overlayInstance.getWrappedDOMNode) {
|
||||
return this._overlayInstance.getWrappedDOMNode();
|
||||
} else {
|
||||
return _reactDom2.default.findDOMNode(this._overlayInstance);
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
return null;
|
||||
}
|
||||
}]);
|
||||
|
||||
return Portal;
|
||||
}(_react.Component);
|
||||
|
||||
Portal.propTypes = {
|
||||
children: _react.PropTypes.any,
|
||||
container: _react.PropTypes.any,
|
||||
lockBody: _react.PropTypes.bool
|
||||
};
|
||||
Portal.defaultProps = {
|
||||
lockBody: true
|
||||
};
|
||||
|
||||
|
||||
function getContainer(container) {
|
||||
var _container = typeof container === 'function' ? container() : container;
|
||||
return _reactDom2.default.findDOMNode(_container) || document.body;
|
||||
}
|
||||
|
||||
exports.default = Portal;
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
var APP_BAR = exports.APP_BAR = 'RTAppBar';
|
||||
var AUTOCOMPLETE = exports.AUTOCOMPLETE = 'RTAutocomplete';
|
||||
var AVATAR = exports.AVATAR = 'RTAvatar';
|
||||
var BUTTON = exports.BUTTON = 'RTButton';
|
||||
var CARD = exports.CARD = 'RTCard';
|
||||
var CHIP = exports.CHIP = 'RTChip';
|
||||
var DATE_PICKER = exports.DATE_PICKER = 'RTDatePicker';
|
||||
var DIALOG = exports.DIALOG = 'RTDialog';
|
||||
var DROPDOWN = exports.DROPDOWN = 'RTDropdown';
|
||||
var INPUT = exports.INPUT = 'RTInput';
|
||||
var LAYOUT = exports.LAYOUT = 'RTLayout';
|
||||
var LINK = exports.LINK = 'RTLink';
|
||||
var LIST = exports.LIST = 'RTList';
|
||||
var NAVIGATION = exports.NAVIGATION = 'RTNavigation';
|
||||
var OVERLAY = exports.OVERLAY = 'RTOverlay';
|
||||
var PROGRESS_BAR = exports.PROGRESS_BAR = 'RTProgressBar';
|
||||
var RADIO = exports.RADIO = 'RTRadio';
|
||||
var RIPPLE = exports.RIPPLE = 'RTRipple';
|
||||
var SLIDER = exports.SLIDER = 'RTSlider';
|
||||
var SNACKBAR = exports.SNACKBAR = 'RTSnackbar';
|
||||
var SWITCH = exports.SWITCH = 'RTSwitch';
|
||||
var TABLE = exports.TABLE = 'RTTable';
|
||||
var TABS = exports.TABS = 'RTTabs';
|
||||
var TOOLTIP = exports.TOOLTIP = 'RTTooltip';
|
||||
var TIMEPICKER = exports.TIMEPICKER = 'RTTimePicker';
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.TimePicker = exports.Tooltip = exports.Table = exports.Switch = exports.Snackbar = exports.Slider = exports.Ripple = exports.ProgressBar = exports.Navigation = exports.Link = exports.Input = exports.Form = exports.FontIcon = exports.Dropdown = exports.Drawer = exports.Dialog = exports.DatePicker = exports.Checkbox = exports.Chip = exports.Avatar = exports.Autocomplete = exports.AppBar = undefined;
|
||||
|
||||
var _button = require('./button');
|
||||
|
||||
Object.keys(_button).forEach(function (key) {
|
||||
if (key === "default") return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function get() {
|
||||
return _button[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
var _card = require('./card');
|
||||
|
||||
Object.keys(_card).forEach(function (key) {
|
||||
if (key === "default") return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function get() {
|
||||
return _card[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
var _layout = require('./layout');
|
||||
|
||||
Object.keys(_layout).forEach(function (key) {
|
||||
if (key === "default") return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function get() {
|
||||
return _layout[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
var _list = require('./list');
|
||||
|
||||
Object.keys(_list).forEach(function (key) {
|
||||
if (key === "default") return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function get() {
|
||||
return _list[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
var _menu = require('./menu');
|
||||
|
||||
Object.keys(_menu).forEach(function (key) {
|
||||
if (key === "default") return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function get() {
|
||||
return _menu[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
var _radio = require('./radio');
|
||||
|
||||
Object.keys(_radio).forEach(function (key) {
|
||||
if (key === "default") return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function get() {
|
||||
return _radio[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
var _tabs = require('./tabs');
|
||||
|
||||
Object.keys(_tabs).forEach(function (key) {
|
||||
if (key === "default") return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function get() {
|
||||
return _tabs[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
require('./utils/polyfills');
|
||||
|
||||
var _app_bar = require('./app_bar');
|
||||
|
||||
var _app_bar2 = _interopRequireDefault(_app_bar);
|
||||
|
||||
var _autocomplete = require('./autocomplete');
|
||||
|
||||
var _autocomplete2 = _interopRequireDefault(_autocomplete);
|
||||
|
||||
var _avatar = require('./avatar');
|
||||
|
||||
var _avatar2 = _interopRequireDefault(_avatar);
|
||||
|
||||
var _chip = require('./chip');
|
||||
|
||||
var _chip2 = _interopRequireDefault(_chip);
|
||||
|
||||
var _checkbox = require('./checkbox');
|
||||
|
||||
var _checkbox2 = _interopRequireDefault(_checkbox);
|
||||
|
||||
var _date_picker = require('./date_picker');
|
||||
|
||||
var _date_picker2 = _interopRequireDefault(_date_picker);
|
||||
|
||||
var _dialog = require('./dialog');
|
||||
|
||||
var _dialog2 = _interopRequireDefault(_dialog);
|
||||
|
||||
var _drawer = require('./drawer');
|
||||
|
||||
var _drawer2 = _interopRequireDefault(_drawer);
|
||||
|
||||
var _dropdown = require('./dropdown');
|
||||
|
||||
var _dropdown2 = _interopRequireDefault(_dropdown);
|
||||
|
||||
var _font_icon = require('./font_icon');
|
||||
|
||||
var _font_icon2 = _interopRequireDefault(_font_icon);
|
||||
|
||||
var _form = require('./form');
|
||||
|
||||
var _form2 = _interopRequireDefault(_form);
|
||||
|
||||
var _input = require('./input');
|
||||
|
||||
var _input2 = _interopRequireDefault(_input);
|
||||
|
||||
var _link = require('./link');
|
||||
|
||||
var _link2 = _interopRequireDefault(_link);
|
||||
|
||||
var _navigation = require('./navigation');
|
||||
|
||||
var _navigation2 = _interopRequireDefault(_navigation);
|
||||
|
||||
var _progress_bar = require('./progress_bar');
|
||||
|
||||
var _progress_bar2 = _interopRequireDefault(_progress_bar);
|
||||
|
||||
var _ripple = require('./ripple');
|
||||
|
||||
var _ripple2 = _interopRequireDefault(_ripple);
|
||||
|
||||
var _slider = require('./slider');
|
||||
|
||||
var _slider2 = _interopRequireDefault(_slider);
|
||||
|
||||
var _snackbar = require('./snackbar');
|
||||
|
||||
var _snackbar2 = _interopRequireDefault(_snackbar);
|
||||
|
||||
var _switch = require('./switch');
|
||||
|
||||
var _switch2 = _interopRequireDefault(_switch);
|
||||
|
||||
var _table = require('./table');
|
||||
|
||||
var _table2 = _interopRequireDefault(_table);
|
||||
|
||||
var _tooltip = require('./tooltip');
|
||||
|
||||
var _tooltip2 = _interopRequireDefault(_tooltip);
|
||||
|
||||
var _time_picker = require('./time_picker');
|
||||
|
||||
var _time_picker2 = _interopRequireDefault(_time_picker);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
exports.AppBar = _app_bar2.default; // Import polyfills for IE11
|
||||
|
||||
exports.Autocomplete = _autocomplete2.default;
|
||||
exports.Avatar = _avatar2.default;
|
||||
exports.Chip = _chip2.default;
|
||||
exports.Checkbox = _checkbox2.default;
|
||||
exports.DatePicker = _date_picker2.default;
|
||||
exports.Dialog = _dialog2.default;
|
||||
exports.Drawer = _drawer2.default;
|
||||
exports.Dropdown = _dropdown2.default;
|
||||
exports.FontIcon = _font_icon2.default;
|
||||
exports.Form = _form2.default;
|
||||
exports.Input = _input2.default;
|
||||
exports.Link = _link2.default;
|
||||
exports.Navigation = _navigation2.default;
|
||||
exports.ProgressBar = _progress_bar2.default;
|
||||
exports.Ripple = _ripple2.default;
|
||||
exports.Slider = _slider2.default;
|
||||
exports.Snackbar = _snackbar2.default;
|
||||
exports.Switch = _switch2.default;
|
||||
exports.Table = _table2.default;
|
||||
exports.Tooltip = _tooltip2.default;
|
||||
exports.TimePicker = _time_picker2.default;
|
||||
|
|
@ -0,0 +1,202 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Input = exports.inputFactory = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames4 = require('classnames');
|
||||
|
||||
var _classnames5 = _interopRequireDefault(_classnames4);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _FontIcon = require('../font_icon/FontIcon.js');
|
||||
|
||||
var _FontIcon2 = _interopRequireDefault(_FontIcon);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var factory = function factory(FontIcon) {
|
||||
var Input = function (_React$Component) {
|
||||
_inherits(Input, _React$Component);
|
||||
|
||||
function Input() {
|
||||
var _Object$getPrototypeO;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, Input);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Input)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (event) {
|
||||
if (_this.props.onChange) _this.props.onChange(event.target.value, event);
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(Input, [{
|
||||
key: 'blur',
|
||||
value: function blur() {
|
||||
this.refs.input.blur();
|
||||
}
|
||||
}, {
|
||||
key: 'focus',
|
||||
value: function focus() {
|
||||
this.refs.input.focus();
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _classnames2;
|
||||
|
||||
var _props = this.props;
|
||||
var children = _props.children;
|
||||
var disabled = _props.disabled;
|
||||
var error = _props.error;
|
||||
var floating = _props.floating;
|
||||
var hint = _props.hint;
|
||||
var icon = _props.icon;
|
||||
var labelText = _props.label;
|
||||
var maxLength = _props.maxLength;
|
||||
var multiline = _props.multiline;
|
||||
var required = _props.required;
|
||||
var theme = _props.theme;
|
||||
var type = _props.type;
|
||||
var value = _props.value;
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value']);
|
||||
|
||||
var length = maxLength && value ? value.length : 0;
|
||||
var labelClassName = (0, _classnames5.default)(theme.label, _defineProperty({}, theme.fixed, !floating));
|
||||
|
||||
var className = (0, _classnames5.default)(theme.input, (_classnames2 = {}, _defineProperty(_classnames2, theme.disabled, disabled), _defineProperty(_classnames2, theme.errored, error), _defineProperty(_classnames2, theme.hidden, type === 'hidden'), _defineProperty(_classnames2, theme.withIcon, icon), _classnames2), this.props.className);
|
||||
|
||||
var valuePresent = value !== null && value !== undefined && value !== '' && !Number.isNaN(value);
|
||||
|
||||
var InputElement = _react2.default.createElement(multiline ? 'textarea' : 'input', _extends({}, others, {
|
||||
className: (0, _classnames5.default)(theme.inputElement, _defineProperty({}, theme.filled, valuePresent)),
|
||||
onChange: this.handleChange,
|
||||
ref: 'input',
|
||||
role: 'input',
|
||||
disabled: disabled,
|
||||
required: required,
|
||||
type: type,
|
||||
value: value,
|
||||
maxLength: maxLength
|
||||
}));
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'input', className: className },
|
||||
InputElement,
|
||||
icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null,
|
||||
_react2.default.createElement('span', { className: theme.bar }),
|
||||
labelText ? _react2.default.createElement(
|
||||
'label',
|
||||
{ className: labelClassName },
|
||||
labelText,
|
||||
required ? _react2.default.createElement(
|
||||
'span',
|
||||
{ className: theme.required },
|
||||
' * '
|
||||
) : null
|
||||
) : null,
|
||||
hint ? _react2.default.createElement(
|
||||
'span',
|
||||
{ className: theme.hint },
|
||||
hint
|
||||
) : null,
|
||||
error ? _react2.default.createElement(
|
||||
'span',
|
||||
{ className: theme.error },
|
||||
error
|
||||
) : null,
|
||||
maxLength ? _react2.default.createElement(
|
||||
'span',
|
||||
{ className: theme.counter },
|
||||
length,
|
||||
'/',
|
||||
maxLength
|
||||
) : null,
|
||||
children
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Input;
|
||||
}(_react2.default.Component);
|
||||
|
||||
Input.propTypes = {
|
||||
children: _react2.default.PropTypes.any,
|
||||
className: _react2.default.PropTypes.string,
|
||||
disabled: _react2.default.PropTypes.bool,
|
||||
error: _react2.default.PropTypes.string,
|
||||
floating: _react2.default.PropTypes.bool,
|
||||
hint: _react2.default.PropTypes.string,
|
||||
icon: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element]),
|
||||
label: _react2.default.PropTypes.string,
|
||||
maxLength: _react2.default.PropTypes.number,
|
||||
multiline: _react2.default.PropTypes.bool,
|
||||
onBlur: _react2.default.PropTypes.func,
|
||||
onChange: _react2.default.PropTypes.func,
|
||||
onFocus: _react2.default.PropTypes.func,
|
||||
onKeyPress: _react2.default.PropTypes.func,
|
||||
required: _react2.default.PropTypes.bool,
|
||||
theme: _react2.default.PropTypes.shape({
|
||||
bar: _react2.default.PropTypes.string,
|
||||
counter: _react2.default.PropTypes.string,
|
||||
disabled: _react2.default.PropTypes.string,
|
||||
error: _react2.default.PropTypes.string,
|
||||
errored: _react2.default.PropTypes.string,
|
||||
hidden: _react2.default.PropTypes.string,
|
||||
hint: _react2.default.PropTypes.string,
|
||||
icon: _react2.default.PropTypes.string,
|
||||
input: _react2.default.PropTypes.string,
|
||||
inputElement: _react2.default.PropTypes.string,
|
||||
required: _react2.default.PropTypes.string,
|
||||
withIcon: _react2.default.PropTypes.string
|
||||
}),
|
||||
type: _react2.default.PropTypes.string,
|
||||
value: _react2.default.PropTypes.any
|
||||
};
|
||||
Input.defaultProps = {
|
||||
className: '',
|
||||
hint: '',
|
||||
disabled: false,
|
||||
floating: true,
|
||||
multiline: false,
|
||||
required: false,
|
||||
type: 'text'
|
||||
};
|
||||
|
||||
|
||||
return Input;
|
||||
};
|
||||
|
||||
var Input = factory(_FontIcon2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.INPUT)(Input);
|
||||
exports.inputFactory = factory;
|
||||
exports.Input = Input;
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
$input-padding: 2 * $unit !default;
|
||||
$input-field-padding: .8 * $unit !default;
|
||||
$input-field-font-size: 1.6 * $unit !default;
|
||||
$input-field-height: $input-field-padding * 2 + $input-field-font-size * 1.4 !default;
|
||||
$input-label-font-size: 1.2 * $unit !default;
|
||||
$input-focus-label-top: .6 * $unit !default;
|
||||
$input-text-background-color: transparent !default;
|
||||
$input-text-label-color: rgba($color-black, 0.26) !default;
|
||||
$input-text-bottom-border-color: rgba($color-black, 0.12) !default;
|
||||
$input-text-highlight-color: $color-primary !default;
|
||||
$input-text-disabled-color: $input-text-bottom-border-color !default;
|
||||
$input-text-disabled-text-color: $input-text-label-color !default;
|
||||
$input-text-error-color: rgb(222, 50, 38) !default;
|
||||
$input-text-required-color: rgb(222, 50, 38) !default;
|
||||
$input-underline-height: 2 * $unit !default;
|
||||
$input-icon-font-size: 2.4 * $unit !default;
|
||||
$input-icon-size: 2 * $input-icon-font-size !default;
|
||||
$input-icon-offset: 1.6 * $unit !default;
|
||||
$input-chevron-offset: .8 * $unit !default;
|
||||
$input-hint-opacity: 1 !default;
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Input = undefined;
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _Input = require('./Input.js');
|
||||
|
||||
var _FontIcon = require('../font_icon/FontIcon.js');
|
||||
|
||||
var _FontIcon2 = _interopRequireDefault(_FontIcon);
|
||||
|
||||
var _theme = require('./theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var Input = (0, _Input.inputFactory)(_FontIcon2.default);
|
||||
var ThemedInput = (0, _reactCssThemr.themr)(_identifiers.INPUT, _theme2.default)(Input);
|
||||
|
||||
exports.default = ThemedInput;
|
||||
exports.Input = ThemedInput;
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
@import "../base";
|
||||
@import "./config";
|
||||
|
||||
.input {
|
||||
position: relative;
|
||||
padding: $input-padding 0;
|
||||
&.withIcon {
|
||||
margin-left: $input-icon-size;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: $input-icon-offset;
|
||||
left: -$input-icon-size;
|
||||
display: block;
|
||||
width: $input-icon-size;
|
||||
height: $input-icon-size;
|
||||
font-size: $input-icon-font-size !important;
|
||||
line-height: $input-icon-size !important;
|
||||
color: $input-text-label-color;
|
||||
text-align: center;
|
||||
transition: color $animation-duration $animation-curve-default;
|
||||
}
|
||||
|
||||
.inputElement {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $input-field-padding 0;
|
||||
font-size: $input-field-font-size;
|
||||
color: $color-text;
|
||||
background-color: $input-text-background-color;
|
||||
border: 0;
|
||||
border-bottom: 1px solid $input-text-bottom-border-color;
|
||||
outline: none;
|
||||
&:focus {
|
||||
~ .bar:before, ~ .bar:after {
|
||||
width: 50%;
|
||||
}
|
||||
~ .label:not(.fixed) {
|
||||
color: $input-text-highlight-color;
|
||||
}
|
||||
~ .label > .required {
|
||||
color: $input-text-required-color;
|
||||
}
|
||||
~ .hint {
|
||||
opacity: $input-hint-opacity;
|
||||
}
|
||||
~ .icon {
|
||||
color: $input-text-highlight-color;
|
||||
}
|
||||
}
|
||||
&:focus, &.filled, &[type="date"], &[type="time"] {
|
||||
~ .label:not(.fixed) {
|
||||
top: $input-focus-label-top;
|
||||
font-size: $input-label-font-size;
|
||||
}
|
||||
}
|
||||
&.filled ~ .label.fixed, &.filled ~ .hint {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: $input-padding + (1.5 * $input-field-padding);
|
||||
left: 0;
|
||||
font-size: $input-field-font-size;
|
||||
line-height: $input-field-font-size;
|
||||
color: $input-text-label-color;
|
||||
pointer-events: none;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: top, font-size, color;
|
||||
&.fixed ~ .hint {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
position: absolute;
|
||||
top: $input-padding + (1.5 * $input-field-padding);
|
||||
left: 0;
|
||||
font-size: $input-field-font-size;
|
||||
line-height: $input-field-font-size;
|
||||
color: $input-text-label-color;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.bar {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
&:before, &:after {
|
||||
@include material-animation-default();
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
content: "";
|
||||
background-color: $input-text-highlight-color;
|
||||
transition-property: width, background-color;
|
||||
}
|
||||
&:before {
|
||||
left: 50%;
|
||||
}
|
||||
&:after {
|
||||
right: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.error, .counter {
|
||||
margin-bottom: - $input-underline-height;
|
||||
font-size: $input-label-font-size;
|
||||
line-height: $input-underline-height;
|
||||
color: $input-text-error-color;
|
||||
}
|
||||
|
||||
.counter {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: $input-text-label-color;
|
||||
}
|
||||
|
||||
.disabled > .inputElement {
|
||||
color: $input-text-disabled-text-color;
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
|
||||
.errored {
|
||||
padding-bottom: 0;
|
||||
> .inputElement {
|
||||
margin-top: 1px;
|
||||
border-bottom-color: $input-text-error-color;
|
||||
}
|
||||
> .counter, > .label {
|
||||
color: $input-text-error-color;
|
||||
}
|
||||
> .label > .required {
|
||||
color: $input-text-required-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Layout = undefined;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _classnames = require('classnames');
|
||||
|
||||
var _classnames2 = _interopRequireDefault(_classnames);
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var Layout = function Layout(_ref) {
|
||||
var className = _ref.className;
|
||||
var children = _ref.children;
|
||||
var theme = _ref.theme;
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'layout', className: (0, _classnames2.default)(theme.layout, className) },
|
||||
children
|
||||
);
|
||||
};
|
||||
|
||||
var ALLOWED_THEMED = ['Themed Panel', 'Themed NavDrawer|Themed Panel', 'Themed NavDrawer|Themed Panel|Themed Sidebar', 'Themed Panel|Themed Sidebar'];
|
||||
|
||||
function getChildName(child) {
|
||||
if (child.type) {
|
||||
return child.type.displayName || child.type.name || child.type;
|
||||
}
|
||||
if (!child.constructor || !child.constructor.name) {
|
||||
return 'UNKNOWN';
|
||||
}
|
||||
return child.constructor.name;
|
||||
}
|
||||
|
||||
Layout.propTypes = {
|
||||
children: function children(props, propName, componentName) {
|
||||
// Accept only [NavDrawer]Pane[Sidebar]
|
||||
var children = props[propName];
|
||||
if (_react2.default.Children.count(children) > 3) {
|
||||
return new Error('`' + componentName + '` ' + 'should have a Pane for a child, optionally preceded and/or followed by a Drawer.');
|
||||
}
|
||||
|
||||
var names = _react2.default.Children.map(children, getChildName).join('|');
|
||||
if (! ~ALLOWED_THEMED.indexOf(names)) {
|
||||
return new Error('`' + componentName + '` ' + 'should have a Panel for a child, optionally preceded by a NavDrawer and/or followed by a Sidebar.');
|
||||
}
|
||||
},
|
||||
|
||||
className: _react2.default.PropTypes.string,
|
||||
theme: _react2.default.PropTypes.shape({
|
||||
layout: _react2.default.PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
Layout.defaultProps = {
|
||||
className: ''
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Layout);
|
||||
exports.Layout = Layout;
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.NavDrawer = undefined;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames3 = require('classnames');
|
||||
|
||||
var _classnames4 = _interopRequireDefault(_classnames3);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
var NavDrawer = function NavDrawer(_ref) {
|
||||
var _classnames;
|
||||
|
||||
var active = _ref.active;
|
||||
var children = _ref.children;
|
||||
var className = _ref.className;
|
||||
var onOverlayClick = _ref.onOverlayClick;
|
||||
var permanentAt = _ref.permanentAt;
|
||||
var pinned = _ref.pinned;
|
||||
var scrollY = _ref.scrollY;
|
||||
var theme = _ref.theme;
|
||||
var width = _ref.width;
|
||||
|
||||
var rootClasses = (0, _classnames4.default)([theme.navDrawer], (_classnames = {}, _defineProperty(_classnames, theme[permanentAt + 'Permanent'], permanentAt), _defineProperty(_classnames, theme.wide, width === 'wide'), _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.pinned, pinned), _classnames), className);
|
||||
|
||||
var drawerClasses = (0, _classnames4.default)(theme.drawerContent, _defineProperty({}, theme.scrollY, scrollY));
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'nav-drawer', className: rootClasses, onClick: onOverlayClick },
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'nav-drawer-scrim', className: theme.scrim },
|
||||
_react2.default.createElement(
|
||||
'aside',
|
||||
{ 'data-react-toolbox': 'nav-drawer-content', className: drawerClasses },
|
||||
children
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
NavDrawer.propTypes = {
|
||||
active: _react2.default.PropTypes.bool,
|
||||
children: _react2.default.PropTypes.any,
|
||||
className: _react2.default.PropTypes.string,
|
||||
onOverlayClick: _react2.default.PropTypes.func,
|
||||
permanentAt: _react2.default.PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
|
||||
pinned: _react2.default.PropTypes.bool,
|
||||
scrollY: _react2.default.PropTypes.bool,
|
||||
theme: _react2.default.PropTypes.shape({
|
||||
active: _react2.default.PropTypes.string.isRequired,
|
||||
drawerContent: _react2.default.PropTypes.string.isRequired,
|
||||
lgPermanent: _react2.default.PropTypes.string.isRequired,
|
||||
mdPermanent: _react2.default.PropTypes.string.isRequired,
|
||||
navDrawer: _react2.default.PropTypes.string.isRequired,
|
||||
pinned: _react2.default.PropTypes.string.isRequired,
|
||||
scrim: _react2.default.PropTypes.string.isRequired,
|
||||
scrollY: _react2.default.PropTypes.string.isRequired,
|
||||
smPermanent: _react2.default.PropTypes.string.isRequired,
|
||||
wide: _react2.default.PropTypes.string.isRequired,
|
||||
xlPermanent: _react2.default.PropTypes.string.isRequired,
|
||||
xxlPermanent: _react2.default.PropTypes.string.isRequired,
|
||||
xxxlPermanent: _react2.default.PropTypes.string.isRequired
|
||||
}),
|
||||
width: _react2.default.PropTypes.oneOf(['normal', 'wide'])
|
||||
};
|
||||
|
||||
NavDrawer.defaultProps = {
|
||||
active: false,
|
||||
className: '',
|
||||
scrollY: false,
|
||||
width: 'normal'
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(NavDrawer);
|
||||
exports.NavDrawer = NavDrawer;
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Panel = undefined;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
var Panel = function Panel(_ref) {
|
||||
var children = _ref.children;
|
||||
var className = _ref.className;
|
||||
var scrollY = _ref.scrollY;
|
||||
var theme = _ref.theme;
|
||||
|
||||
var _className = (0, _classnames3.default)(theme.panel, _defineProperty({}, theme.scrollY, scrollY), className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'panel', className: _className },
|
||||
children
|
||||
);
|
||||
};
|
||||
|
||||
Panel.propTypes = {
|
||||
children: _react2.default.PropTypes.any,
|
||||
className: _react2.default.PropTypes.string,
|
||||
scrollY: _react2.default.PropTypes.bool,
|
||||
theme: _react2.default.PropTypes.shape({
|
||||
panel: _react2.default.PropTypes.string.isRequired,
|
||||
scrollY: _react2.default.PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
Panel.defaultProps = {
|
||||
className: '',
|
||||
scrollY: false
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Panel);
|
||||
exports.Panel = Panel;
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Sidebar = undefined;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames3 = require('classnames');
|
||||
|
||||
var _classnames4 = _interopRequireDefault(_classnames3);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
var Sidebar = function Sidebar(_ref) {
|
||||
var children = _ref.children;
|
||||
var className = _ref.className;
|
||||
var pinned = _ref.pinned;
|
||||
var scrollY = _ref.scrollY;
|
||||
var theme = _ref.theme;
|
||||
var width = _ref.width;
|
||||
|
||||
var wrapperClasses = (0, _classnames4.default)(theme.sidebar, theme['width-' + width], _defineProperty({}, theme.pinned, pinned), className);
|
||||
|
||||
var innerClasses = (0, _classnames4.default)(theme.sidebarContent, _defineProperty({}, theme.scrollY, scrollY));
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'sidebar', className: wrapperClasses },
|
||||
_react2.default.createElement(
|
||||
'aside',
|
||||
{ 'data-react-toolbox': 'sidebar-content', className: innerClasses },
|
||||
children
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
Sidebar.propTypes = {
|
||||
children: _react2.default.PropTypes.any,
|
||||
className: _react2.default.PropTypes.string,
|
||||
pinned: _react2.default.PropTypes.bool,
|
||||
scrollY: _react2.default.PropTypes.bool,
|
||||
theme: _react2.default.PropTypes.shape({
|
||||
pinned: _react2.default.PropTypes.string.isRequired,
|
||||
scrollY: _react2.default.PropTypes.string.isRequired,
|
||||
sidebar: _react2.default.PropTypes.string.isRequired,
|
||||
sidebarContent: _react2.default.PropTypes.string.isRequired
|
||||
}),
|
||||
width: _react2.default.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
|
||||
};
|
||||
|
||||
Sidebar.defaultProps = {
|
||||
className: '',
|
||||
pinned: false,
|
||||
scrollY: false,
|
||||
width: 5
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Sidebar);
|
||||
exports.Sidebar = Sidebar;
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
$drawer-background-color: $palette-grey-50 !default;
|
||||
$drawer-border-color: $palette-grey-300 !default;
|
||||
$drawer-text-color: $palette-grey-800 !default;
|
||||
|
||||
$drawer-overlay-color: $color-black !default;
|
||||
$drawer-overlay-opacity: .6 !default;
|
||||
|
||||
// from: https://www.google.com/design/spec/layout/structure.html#structure-side-nav
|
||||
$navigation-drawer-desktop-width: 5 * $standard-increment-desktop !default;
|
||||
$navigation-drawer-max-desktop-width: 40 * $unit !default;
|
||||
|
||||
// Mobile:
|
||||
// Width = Screen width − 56 dp
|
||||
// Maximum width: 320dp
|
||||
$navigation-drawer-mobile-width: 5 * $standard-increment-mobile !default;
|
||||
|
||||
// sass doesn't like use of variable here: calc(100% - $standard-increment-mobile);
|
||||
$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
@mixin open() {
|
||||
transition-delay: $animation-delay;
|
||||
& > .scrim {
|
||||
& > .drawerContent {
|
||||
pointer-events: all;
|
||||
transition-delay: $animation-delay;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin permanent() {
|
||||
@include open();
|
||||
|
||||
width: $navigation-drawer-desktop-width;
|
||||
max-width: $navigation-drawer-desktop-width;
|
||||
|
||||
&.wide {
|
||||
width: $navigation-drawer-max-desktop-width;
|
||||
max-width: $navigation-drawer-max-desktop-width;
|
||||
}
|
||||
|
||||
&.active {
|
||||
& > .scrim {
|
||||
width: 0;
|
||||
background-color: rgba($drawer-overlay-color, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Sidebar = exports.NavDrawer = exports.Panel = exports.Layout = undefined;
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _Layout = require('./Layout.js');
|
||||
|
||||
var _Panel = require('./Panel.js');
|
||||
|
||||
var _NavDrawer = require('./NavDrawer.js');
|
||||
|
||||
var _Sidebar = require('./Sidebar.js');
|
||||
|
||||
var _theme = require('./theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var ThemedLayout = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_Layout.Layout);
|
||||
var ThemedPanel = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_Panel.Panel);
|
||||
var ThemedNavDrawer = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_NavDrawer.NavDrawer);
|
||||
var ThemedSidebar = (0, _reactCssThemr.themr)(_identifiers.LAYOUT, _theme2.default)(_Sidebar.Sidebar);
|
||||
|
||||
exports.Layout = ThemedLayout;
|
||||
exports.Panel = ThemedPanel;
|
||||
exports.NavDrawer = ThemedNavDrawer;
|
||||
exports.Sidebar = ThemedSidebar;
|
||||
|
|
@ -0,0 +1,309 @@
|
|||
@import "../base";
|
||||
@import "./config";
|
||||
@import "./mixins";
|
||||
|
||||
.layout {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
overflow-y: hidden;
|
||||
|
||||
.navDrawer {
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: width, min-width;
|
||||
|
||||
.scrim {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $z-index-highest;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: rgba($drawer-overlay-color, 0);
|
||||
transition: background-color $animation-duration $animation-curve-default, width 10ms linear $animation-duration;
|
||||
}
|
||||
|
||||
.drawerContent {
|
||||
@include shadow-2dp();
|
||||
display: flex;
|
||||
width: $navigation-drawer-mobile-width;
|
||||
max-width: $navigation-drawer-max-mobile-width;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
color: $drawer-text-color;
|
||||
pointer-events: none;
|
||||
background-color: $drawer-background-color;
|
||||
border-right: 1px solid $drawer-border-color;
|
||||
transition: transform $animation-duration $animation-curve-default;
|
||||
transform: translateX(-100%);
|
||||
|
||||
&.scrollY {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
@include open();
|
||||
width: $navigation-drawer-mobile-width;
|
||||
max-width: $navigation-drawer-max-mobile-width;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&:not(.pinned) {
|
||||
@include open();
|
||||
.scrim {
|
||||
width: 100%;
|
||||
background-color: rgba($drawer-overlay-color, $drawer-overlay-opacity);
|
||||
transition: background-color $animation-duration $animation-curve-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Larger than mobile width drawer
|
||||
@media screen and (min-width: $layout-breakpoint-xs) {
|
||||
&.pinned {
|
||||
width: $navigation-drawer-desktop-width;
|
||||
max-width: $navigation-drawer-desktop-width;
|
||||
}
|
||||
|
||||
.drawerContent {
|
||||
width: $navigation-drawer-desktop-width;
|
||||
max-width: $navigation-drawer-desktop-width;
|
||||
}
|
||||
|
||||
&.wide {
|
||||
&.pinned {
|
||||
width: $navigation-drawer-max-desktop-width;
|
||||
max-width: $navigation-drawer-max-desktop-width;
|
||||
}
|
||||
|
||||
.drawerContent {
|
||||
width: $navigation-drawer-max-desktop-width;
|
||||
max-width: $navigation-drawer-max-desktop-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Permanent screen, ignore .active and make part of layout
|
||||
@media screen and (min-width: $layout-breakpoint-sm) {
|
||||
&.smPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-md) {
|
||||
&.mdPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-lg) {
|
||||
&.lgPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-xl) {
|
||||
&.xlPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-xxl) {
|
||||
&.xxlPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-xxxl) {
|
||||
&.xxxlPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .layout {
|
||||
.scrim {
|
||||
z-index: $z-index-highest - 1;
|
||||
}
|
||||
& .layout {
|
||||
.scrim {
|
||||
z-index: $z-index-highest - 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
overflow-y: hidden;
|
||||
|
||||
&.scrollY {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: $z-index-highest - 1;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
color: $drawer-text-color;
|
||||
background-color: $drawer-background-color;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: width;
|
||||
|
||||
.sidebarContent {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
overflow-y: hidden;
|
||||
|
||||
&.scrollY {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
$increments: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
|
||||
|
||||
@each $increment in $increments {
|
||||
&.width-#{$increment} {
|
||||
$mobile: $standard-increment-mobile * $increment;
|
||||
$desktop: $standard-increment-desktop * $increment;
|
||||
|
||||
.sidebarContent {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@if $increment < 10 {
|
||||
@media screen and (min-width: $layout-breakpoint-xs) and (orientation: landscape) {
|
||||
position: relative;
|
||||
|
||||
.sidebarContent {
|
||||
min-width: $mobile;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
width: $mobile;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-xs) and (orientation: portrait) {
|
||||
position: relative;
|
||||
|
||||
.sidebarContent {
|
||||
min-width: $desktop;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
width: $desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $increment < 11 {
|
||||
@media screen and (min-width: $layout-breakpoint-sm-tablet) {
|
||||
position: relative;
|
||||
|
||||
.sidebarContent {
|
||||
min-width: $desktop;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
width: $desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-sm) {
|
||||
position: relative;
|
||||
|
||||
.sidebarContent {
|
||||
min-width: $desktop;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
width: $desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$percentages: (25, 33, 50, 66, 75);
|
||||
|
||||
&.width-100 {
|
||||
position: absolute;
|
||||
|
||||
.sidebarContent {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@each $pct in $percentages {
|
||||
&.width-#{$pct} {
|
||||
position: absolute;
|
||||
|
||||
.sidebarContent {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-sm-tablet) {
|
||||
@each $pct in $percentages {
|
||||
&.width-#{$pct} {
|
||||
position: relative;
|
||||
|
||||
.sidebarContent {
|
||||
min-width: $pct * 1%;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
width: $pct * 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Link = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _FontIcon = require('../font_icon/FontIcon.js');
|
||||
|
||||
var _FontIcon2 = _interopRequireDefault(_FontIcon);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
var Link = function Link(_ref) {
|
||||
var active = _ref.active;
|
||||
var children = _ref.children;
|
||||
var className = _ref.className;
|
||||
var count = _ref.count;
|
||||
var icon = _ref.icon;
|
||||
var label = _ref.label;
|
||||
var theme = _ref.theme;
|
||||
|
||||
var others = _objectWithoutProperties(_ref, ['active', 'children', 'className', 'count', 'icon', 'label', 'theme']);
|
||||
|
||||
var _className = (0, _classnames3.default)(theme.link, _defineProperty({}, theme.active, active), className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'a',
|
||||
_extends({ 'data-react-toolbox': 'link', className: _className }, others),
|
||||
icon ? _react2.default.createElement(_FontIcon2.default, { className: theme.icon, value: icon }) : null,
|
||||
label ? _react2.default.createElement(
|
||||
'abbr',
|
||||
null,
|
||||
label
|
||||
) : null,
|
||||
count && parseInt(count) !== 0 ? _react2.default.createElement(
|
||||
'small',
|
||||
null,
|
||||
count
|
||||
) : null,
|
||||
children
|
||||
);
|
||||
};
|
||||
|
||||
Link.propTypes = {
|
||||
active: _react.PropTypes.bool,
|
||||
children: _react.PropTypes.node,
|
||||
className: _react.PropTypes.string,
|
||||
count: _react.PropTypes.number,
|
||||
icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
label: _react.PropTypes.string,
|
||||
theme: _react.PropTypes.shape({
|
||||
active: _react.PropTypes.string.isRequired,
|
||||
icon: _react.PropTypes.string.isRequired,
|
||||
link: _react.PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
Link.defaultProps = {
|
||||
active: false,
|
||||
className: ''
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LINK)(Link);
|
||||
exports.Link = Link;
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Link = undefined;
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _Link = require('./Link.js');
|
||||
|
||||
var _theme = require('./theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var ThemedLink = (0, _reactCssThemr.themr)(_identifiers.LINK, _theme2.default)(_Link.Link);
|
||||
|
||||
exports.default = ThemedLink;
|
||||
exports.Link = ThemedLink;
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
@import "../base";
|
||||
|
||||
.icon {
|
||||
margin-right: $unit;
|
||||
font-size: 1.8 * $unit;
|
||||
}
|
||||
|
||||
.link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
transition: opacity $animation-duration $animation-curve-default;
|
||||
&:not(.active) {
|
||||
opacity: .5;
|
||||
}
|
||||
&:hover, &:active {
|
||||
opacity: 1;
|
||||
}
|
||||
> * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
> abbr {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
> small {
|
||||
margin-left: .8 * $unit;
|
||||
font-size: $font-size-tiny;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.List = exports.listFactory = undefined;
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames = require('classnames');
|
||||
|
||||
var _classnames2 = _interopRequireDefault(_classnames);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _ListItem = require('./ListItem.js');
|
||||
|
||||
var _ListItem2 = _interopRequireDefault(_ListItem);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var factory = function factory(ListItem) {
|
||||
var List = function (_Component) {
|
||||
_inherits(List, _Component);
|
||||
|
||||
function List() {
|
||||
_classCallCheck(this, List);
|
||||
|
||||
return _possibleConstructorReturn(this, Object.getPrototypeOf(List).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(List, [{
|
||||
key: 'renderItems',
|
||||
value: function renderItems() {
|
||||
var _this2 = this;
|
||||
|
||||
return _react2.default.Children.map(this.props.children, function (item) {
|
||||
if (item.type === ListItem) {
|
||||
return _react2.default.cloneElement(item, {
|
||||
ripple: _this2.props.ripple,
|
||||
selectable: _this2.props.selectable
|
||||
});
|
||||
} else {
|
||||
return _react2.default.cloneElement(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
return _react2.default.createElement(
|
||||
'ul',
|
||||
{ 'data-react-toolbox': 'list', className: (0, _classnames2.default)(this.props.theme.list, this.props.className) },
|
||||
this.renderItems()
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return List;
|
||||
}(_react.Component);
|
||||
|
||||
List.propTypes = {
|
||||
children: _react.PropTypes.node,
|
||||
className: _react.PropTypes.string,
|
||||
ripple: _react.PropTypes.bool,
|
||||
selectable: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
list: _react.PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
List.defaultProps = {
|
||||
className: '',
|
||||
ripple: false,
|
||||
selectable: false
|
||||
};
|
||||
|
||||
|
||||
return List;
|
||||
};
|
||||
|
||||
var List = factory(_ListItem2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(List);
|
||||
exports.listFactory = factory;
|
||||
exports.List = List;
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.ListCheckbox = exports.listCheckboxFactory = undefined;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _Checkbox = require('../checkbox/Checkbox.js');
|
||||
|
||||
var _Checkbox2 = _interopRequireDefault(_Checkbox);
|
||||
|
||||
var _ListItemContent = require('./ListItemContent.js');
|
||||
|
||||
var _ListItemContent2 = _interopRequireDefault(_ListItemContent);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
var factory = function factory(Checkbox, ListItemContent) {
|
||||
var ListCheckbox = function ListCheckbox(_ref) {
|
||||
var caption = _ref.caption;
|
||||
var checked = _ref.checked;
|
||||
var className = _ref.className;
|
||||
var disabled = _ref.disabled;
|
||||
var legend = _ref.legend;
|
||||
var name = _ref.name;
|
||||
var onBlur = _ref.onBlur;
|
||||
var onChange = _ref.onChange;
|
||||
var onFocus = _ref.onFocus;
|
||||
var theme = _ref.theme;
|
||||
|
||||
var _className = (0, _classnames3.default)(theme.item, theme.checkboxItem, _defineProperty({}, theme.disabled, disabled), className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'li',
|
||||
{ className: _className },
|
||||
_react2.default.createElement(Checkbox, {
|
||||
checked: checked,
|
||||
className: theme.checkbox,
|
||||
disabled: disabled,
|
||||
label: _react2.default.createElement(ListItemContent, { caption: caption, legend: legend }),
|
||||
name: name,
|
||||
onBlur: onBlur,
|
||||
onChange: onChange,
|
||||
onFocus: onFocus
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
ListCheckbox.propTypes = {
|
||||
caption: _react.PropTypes.string.isRequired,
|
||||
checked: _react.PropTypes.bool,
|
||||
className: _react.PropTypes.string,
|
||||
disabled: _react.PropTypes.bool,
|
||||
legend: _react.PropTypes.string,
|
||||
name: _react.PropTypes.string,
|
||||
onBlur: _react.PropTypes.func,
|
||||
onChange: _react.PropTypes.func,
|
||||
onFocus: _react.PropTypes.func,
|
||||
theme: _react.PropTypes.shape({
|
||||
checkbox: _react.PropTypes.string.isRequired,
|
||||
checkboxItem: _react.PropTypes.string.isRequired,
|
||||
disabled: _react.PropTypes.string.isRequired,
|
||||
item: _react.PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
ListCheckbox.defaultProps = {
|
||||
checked: false,
|
||||
disabled: false
|
||||
};
|
||||
|
||||
return ListCheckbox;
|
||||
};
|
||||
|
||||
var ListCheckbox = factory(_Checkbox2.default, _ListItemContent2.default);
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListCheckbox);
|
||||
exports.listCheckboxFactory = factory;
|
||||
exports.ListCheckbox = ListCheckbox;
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.ListDivider = undefined;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var ListDivider = function ListDivider(_ref) {
|
||||
var inset = _ref.inset;
|
||||
var theme = _ref.theme;
|
||||
return _react2.default.createElement('hr', { className: inset ? theme.divider + ' ' + theme.inset : theme.divider });
|
||||
};
|
||||
|
||||
ListDivider.propTypes = {
|
||||
inset: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
divider: _react.PropTypes.string.isRequired,
|
||||
inset: _react.PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
ListDivider.defaultProps = {
|
||||
inset: false
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListDivider);
|
||||
exports.ListDivider = ListDivider;
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.ListItem = exports.listItemFactory = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _ListItemContent = require('./ListItemContent.js');
|
||||
|
||||
var _ListItemContent2 = _interopRequireDefault(_ListItemContent);
|
||||
|
||||
var _ListItemLayout = require('./ListItemLayout.js');
|
||||
|
||||
var _ListItemLayout2 = _interopRequireDefault(_ListItemLayout);
|
||||
|
||||
var _Ripple = require('../ripple/Ripple.js');
|
||||
|
||||
var _Ripple2 = _interopRequireDefault(_Ripple);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var factory = function factory(ripple, ListItemLayout, ListItemContent) {
|
||||
var ListItem = function (_Component) {
|
||||
_inherits(ListItem, _Component);
|
||||
|
||||
function ListItem() {
|
||||
var _Object$getPrototypeO;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, ListItem);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ListItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
|
||||
if (_this.props.onClick && !_this.props.disabled) {
|
||||
_this.props.onClick(event);
|
||||
}
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(ListItem, [{
|
||||
key: 'groupChildren',
|
||||
value: function groupChildren() {
|
||||
var children = {
|
||||
leftActions: [],
|
||||
rightActions: [],
|
||||
ignored: []
|
||||
};
|
||||
|
||||
_react2.default.Children.forEach(this.props.children, function (child, i) {
|
||||
if (!_react2.default.isValidElement(child)) {
|
||||
return;
|
||||
}
|
||||
if (child.props.listItemIgnore) {
|
||||
children.ignored.push(child);
|
||||
return;
|
||||
}
|
||||
if (child.type === ListItemContent) {
|
||||
children.itemContent = child;
|
||||
return;
|
||||
}
|
||||
var bucket = children.itemContent ? 'rightActions' : 'leftActions';
|
||||
children[bucket].push(_extends({}, child, { key: i }));
|
||||
});
|
||||
|
||||
return children;
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _props = this.props;
|
||||
var className = _props.className;
|
||||
var onMouseDown = _props.onMouseDown;
|
||||
var to = _props.to;
|
||||
var onClick = _props.onClick;
|
||||
var hasRipple = _props.ripple;
|
||||
var theme = _props.theme;
|
||||
|
||||
var other = _objectWithoutProperties(_props, ['className', 'onMouseDown', 'to', 'onClick', 'ripple', 'theme']); //eslint-disable-line no-unused-vars
|
||||
|
||||
|
||||
var children = this.groupChildren();
|
||||
var content = _react2.default.createElement(ListItemLayout, _extends({}, children, other));
|
||||
return _react2.default.createElement(
|
||||
'li',
|
||||
{ className: theme.listItem + ' ' + className, onClick: this.handleClick, onMouseDown: onMouseDown },
|
||||
to ? _react2.default.createElement(
|
||||
'a',
|
||||
{ href: this.props.to },
|
||||
content
|
||||
) : content,
|
||||
children.ignored
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return ListItem;
|
||||
}(_react.Component);
|
||||
|
||||
ListItem.propTypes = {
|
||||
children: _react.PropTypes.any,
|
||||
className: _react.PropTypes.string,
|
||||
disabled: _react.PropTypes.bool,
|
||||
onClick: _react.PropTypes.func,
|
||||
ripple: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
listItem: _react.PropTypes.string.isRequired
|
||||
}),
|
||||
to: _react.PropTypes.string
|
||||
};
|
||||
ListItem.defaultProps = {
|
||||
className: '',
|
||||
disabled: false,
|
||||
ripple: false
|
||||
};
|
||||
|
||||
|
||||
return ripple(ListItem);
|
||||
};
|
||||
|
||||
var ripple = (0, _Ripple2.default)({ centered: false, listItemIgnore: true });
|
||||
var ListItem = factory(ripple, _ListItemLayout2.default, _ListItemContent2.default);
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItem);
|
||||
exports.listItemFactory = factory;
|
||||
exports.ListItem = ListItem;
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.ListItemAction = undefined;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var ListItemAction = function ListItemAction(_ref) {
|
||||
var action = _ref.action;
|
||||
var theme = _ref.theme;
|
||||
var _action$props = action.props;
|
||||
var onClick = _action$props.onClick;
|
||||
var onMouseDown = _action$props.onMouseDown;
|
||||
|
||||
var stopRipple = onClick && !onMouseDown;
|
||||
var stop = function stop(e) {
|
||||
return e.stopPropagation();
|
||||
};
|
||||
return _react2.default.createElement(
|
||||
'span',
|
||||
{ className: theme.itemAction, onMouseDown: stopRipple && stop, onClick: onClick && stop },
|
||||
action
|
||||
);
|
||||
};
|
||||
|
||||
ListItemAction.propTypes = {
|
||||
action: _react.PropTypes.object,
|
||||
theme: _react.PropTypes.shape({
|
||||
itemAction: _react2.default.PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemAction);
|
||||
exports.ListItemAction = ListItemAction;
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.ListItemActions = exports.listItemActionsFactory = undefined;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _ListItemAction = require('./ListItemAction.js');
|
||||
|
||||
var _ListItemAction2 = _interopRequireDefault(_ListItemAction);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var factory = function factory(ListItemAction) {
|
||||
var ListItemActions = function ListItemActions(_ref) {
|
||||
var type = _ref.type;
|
||||
var children = _ref.children;
|
||||
var theme = _ref.theme;
|
||||
|
||||
var validChildren = _react2.default.Children.toArray(children).filter(function (c) {
|
||||
return _react2.default.isValidElement(c);
|
||||
});
|
||||
|
||||
return _react2.default.createElement(
|
||||
'span',
|
||||
{ className: theme[type] },
|
||||
validChildren.map(function (action, i) {
|
||||
return _react2.default.createElement(ListItemAction, { key: i, action: action });
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
ListItemActions.propTypes = {
|
||||
children: _react.PropTypes.any,
|
||||
theme: _react.PropTypes.shape({
|
||||
left: _react.PropTypes.string.isRequired,
|
||||
right: _react.PropTypes.string.isRequired
|
||||
}),
|
||||
type: _react.PropTypes.oneOf(['left', 'right'])
|
||||
};
|
||||
|
||||
return ListItemActions;
|
||||
};
|
||||
|
||||
var ListItemActions = factory(_ListItemAction2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemActions);
|
||||
exports.listItemActionsFactory = factory;
|
||||
exports.ListItemActions = ListItemActions;
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.ListItemContent = exports.listItemContentFactory = undefined;
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _ListItemText = require('./ListItemText.js');
|
||||
|
||||
var _ListItemText2 = _interopRequireDefault(_ListItemText);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var types = ['auto', 'normal', 'large'];
|
||||
|
||||
var factory = function factory(ListItemText) {
|
||||
var ListItemContent = function (_Component) {
|
||||
_inherits(ListItemContent, _Component);
|
||||
|
||||
function ListItemContent() {
|
||||
_classCallCheck(this, ListItemContent);
|
||||
|
||||
return _possibleConstructorReturn(this, Object.getPrototypeOf(ListItemContent).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(ListItemContent, [{
|
||||
key: 'getType',
|
||||
value: function getType() {
|
||||
var _props = this.props;
|
||||
var type = _props.type;
|
||||
var children = _props.children;
|
||||
var caption = _props.caption;
|
||||
var legend = _props.legend;
|
||||
|
||||
|
||||
var count = _react2.default.Children.count(children);
|
||||
[caption, legend].forEach(function (s) {
|
||||
count += s ? 1 : 0;
|
||||
});
|
||||
var typeIndex = Math.min(count, types.length);
|
||||
|
||||
return type || types[typeIndex];
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _props2 = this.props;
|
||||
var children = _props2.children;
|
||||
var caption = _props2.caption;
|
||||
var legend = _props2.legend;
|
||||
var theme = _props2.theme;
|
||||
|
||||
var className = (0, _classnames3.default)(theme.itemContentRoot, _defineProperty({}, theme[this.getType()], theme[this.getType()]));
|
||||
|
||||
return _react2.default.createElement(
|
||||
'span',
|
||||
{ className: className },
|
||||
caption && _react2.default.createElement(
|
||||
ListItemText,
|
||||
{ primary: true },
|
||||
caption
|
||||
),
|
||||
legend && _react2.default.createElement(
|
||||
ListItemText,
|
||||
null,
|
||||
legend
|
||||
),
|
||||
children
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return ListItemContent;
|
||||
}(_react.Component);
|
||||
|
||||
ListItemContent.propTypes = {
|
||||
caption: _react.PropTypes.string,
|
||||
children: _react.PropTypes.any,
|
||||
legend: _react.PropTypes.string,
|
||||
theme: _react.PropTypes.shape({
|
||||
itemContentRoot: _react.PropTypes.string.isRequired,
|
||||
large: _react.PropTypes.string.isRequired
|
||||
}),
|
||||
type: _react.PropTypes.oneOf(types)
|
||||
};
|
||||
|
||||
|
||||
return ListItemContent;
|
||||
};
|
||||
|
||||
var ListItemContent = (0, _reactCssThemr.themr)(_identifiers.LIST)(_ListItemText2.default);
|
||||
exports.default = ListItemContent;
|
||||
exports.listItemContentFactory = factory;
|
||||
exports.ListItemContent = ListItemContent;
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.ListItemLayout = exports.listItemLayoutFactory = undefined;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _FontIcon = require('../font_icon/FontIcon.js');
|
||||
|
||||
var _FontIcon2 = _interopRequireDefault(_FontIcon);
|
||||
|
||||
var _Avatar = require('../avatar/Avatar.js');
|
||||
|
||||
var _Avatar2 = _interopRequireDefault(_Avatar);
|
||||
|
||||
var _ListItemContent = require('./ListItemContent.js');
|
||||
|
||||
var _ListItemContent2 = _interopRequireDefault(_ListItemContent);
|
||||
|
||||
var _ListItemActions = require('./ListItemActions.js');
|
||||
|
||||
var _ListItemActions2 = _interopRequireDefault(_ListItemActions);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
var factory = function factory(Avatar, ListItemContent, ListItemActions) {
|
||||
var ListItemLayout = function ListItemLayout(props) {
|
||||
var _classnames;
|
||||
|
||||
var className = (0, _classnames3.default)(props.theme.item, (_classnames = {}, _defineProperty(_classnames, props.theme.disabled, props.disabled), _defineProperty(_classnames, props.theme.selectable, props.selectable), _classnames), props.className);
|
||||
|
||||
var leftActions = [props.leftIcon && _react2.default.createElement(_FontIcon2.default, { value: props.leftIcon, key: 'leftIcon' }), props.avatar && _react2.default.createElement(Avatar, { image: props.avatar, key: 'avatar' })].concat(_toConsumableArray(props.leftActions));
|
||||
var rightActions = [props.rightIcon && _react2.default.createElement(_FontIcon2.default, { value: props.rightIcon, key: 'rightIcon' })].concat(_toConsumableArray(props.rightActions));
|
||||
var content = props.itemContent || _react2.default.createElement(ListItemContent, { caption: props.caption, legend: props.legend });
|
||||
var emptyActions = function emptyActions(item) {
|
||||
return !item[0] && !item[1] && !item[2];
|
||||
};
|
||||
|
||||
return _react2.default.createElement(
|
||||
'span',
|
||||
{ className: className },
|
||||
!emptyActions(leftActions) > 0 && _react2.default.createElement(
|
||||
ListItemActions,
|
||||
{ type: 'left' },
|
||||
leftActions
|
||||
),
|
||||
content,
|
||||
!emptyActions(rightActions) > 0 && _react2.default.createElement(
|
||||
ListItemActions,
|
||||
{ type: 'right' },
|
||||
rightActions
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
ListItemLayout.propTypes = {
|
||||
avatar: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
caption: _react.PropTypes.string,
|
||||
children: _react.PropTypes.any,
|
||||
className: _react.PropTypes.string,
|
||||
disabled: _react.PropTypes.bool,
|
||||
itemContent: _react.PropTypes.element,
|
||||
leftActions: _react.PropTypes.array,
|
||||
leftIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
legend: _react.PropTypes.string,
|
||||
rightActions: _react.PropTypes.array,
|
||||
rightIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
selectable: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
disabled: _react.PropTypes.string.isRequired,
|
||||
item: _react.PropTypes.string.isRequired,
|
||||
selectable: _react.PropTypes.string.isRequired
|
||||
}),
|
||||
to: _react.PropTypes.string
|
||||
};
|
||||
|
||||
ListItemLayout.defaultProps = {
|
||||
disabled: false,
|
||||
selectable: false
|
||||
};
|
||||
|
||||
return ListItemLayout;
|
||||
};
|
||||
|
||||
var ListItemLayout = factory(_Avatar2.default, _ListItemContent2.default, _ListItemActions2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemLayout);
|
||||
exports.listItemLayoutFactory = factory;
|
||||
exports.ListItemLayout = ListItemLayout;
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.ListItemText = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
var ListItemText = function ListItemText(_ref) {
|
||||
var className = _ref.className;
|
||||
var primary = _ref.primary;
|
||||
var children = _ref.children;
|
||||
var theme = _ref.theme;
|
||||
|
||||
var other = _objectWithoutProperties(_ref, ['className', 'primary', 'children', 'theme']);
|
||||
|
||||
var _className = (0, _classnames3.default)(theme.itemText, _defineProperty({}, theme.primary, primary), className);
|
||||
return _react2.default.createElement(
|
||||
'span',
|
||||
_extends({ 'data-react-toolbox': 'list-item-text', className: _className }, other),
|
||||
children
|
||||
);
|
||||
};
|
||||
|
||||
ListItemText.propTypes = {
|
||||
children: _react.PropTypes.any,
|
||||
className: _react.PropTypes.string,
|
||||
primary: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
itemText: _react.PropTypes.string.isRequired,
|
||||
primary: _react.PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
ListItemText.defaultProps = {
|
||||
primary: false
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemText);
|
||||
exports.ListItemText = ListItemText;
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.ListSubHeader = undefined;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames = require('classnames');
|
||||
|
||||
var _classnames2 = _interopRequireDefault(_classnames);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var ListSubHeader = function ListSubHeader(_ref) {
|
||||
var caption = _ref.caption;
|
||||
var className = _ref.className;
|
||||
var theme = _ref.theme;
|
||||
return _react2.default.createElement(
|
||||
'h5',
|
||||
{ className: (0, _classnames2.default)(theme.subheader, className) },
|
||||
caption
|
||||
);
|
||||
};
|
||||
|
||||
ListSubHeader.propTypes = {
|
||||
caption: _react.PropTypes.string,
|
||||
className: _react.PropTypes.string,
|
||||
theme: _react.PropTypes.object
|
||||
};
|
||||
|
||||
ListSubHeader.defaultProps = {
|
||||
className: ''
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListSubHeader);
|
||||
exports.ListSubHeader = ListSubHeader;
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
$list-vertical-padding: .8 * $unit !default;
|
||||
$list-horizontal-padding: 1.6 * $unit !default;
|
||||
$list-content-left-spacing: 7.2 * $unit !default;
|
||||
$list-subheader-height: 4.8 * $unit !default;
|
||||
$list-subheader-font-size: 1.4 * $unit !default;
|
||||
$list-subheader-font-weight: 500 !default;
|
||||
$list-divider-height: .1 * $unit !default;
|
||||
$list-item-min-height: 4.8 * $unit !default;
|
||||
$list-item-min-height-legend: 7.2 * $unit !default;
|
||||
$list-item-hover-color: $palette-grey-200 !default;
|
||||
$list-item-legend-margin-top: .3 * $unit !default;
|
||||
$list-item-icon-font-size: 2.4 * $unit !default;
|
||||
$list-item-icon-size: 1.8 * $unit !default;
|
||||
$list-item-right-icon-margin: $list-content-left-spacing - 2 * $list-horizontal-padding - $list-item-icon-size !default;
|
||||
$list-item-right-checkbox-margin: $list-item-right-icon-margin + $list-horizontal-padding !default;
|
||||
$list-item-avatar-height: 4 * $unit !default;
|
||||
$list-item-avatar-margin: .8 * $unit !default;
|
||||
$list-item-child-margin: .8 * $unit !default;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue