Fix #898
Javi Velasco
parent
084e367bb7
commit
2e2a8fdc12
|
|
@ -1,6 +1,6 @@
|
|||
lib
|
||||
build
|
||||
node_modules
|
||||
npm-debug.log
|
||||
yarn.lock
|
||||
.idea
|
||||
.DS_Store
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
301
lib/_colors.scss
301
lib/_colors.scss
|
|
@ -1,301 +0,0 @@
|
|||
//-- 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;
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
//-- 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://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
|
||||
$standard-increment-mobile: (5.6 * $unit) !default;
|
||||
$standard-increment-desktop: (6.4 * $unit) !default;
|
||||
|
||||
// https://material.google.com/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://material.google.com/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;
|
||||
260
lib/_mixins.scss
260
lib/_mixins.scss
|
|
@ -1,260 +0,0 @@
|
|||
// 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: $unit * 11.2;
|
||||
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: $unit * 5.6;
|
||||
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: $unit * 4.5;
|
||||
font-weight: 400;
|
||||
line-height: $unit * 4.8;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-display-1($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: $unit * 3.4;
|
||||
font-weight: 400;
|
||||
line-height: $unit * 4;
|
||||
|
||||
@if $color-contrast {
|
||||
opacity: .54;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin typo-headline($color-contrast: false, $use-preferred: true) {
|
||||
@include typo-preferred-font($use-preferred);
|
||||
font-size: $unit * 2.4;
|
||||
font-weight: 400;
|
||||
line-height: $unit * 3.2;
|
||||
-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: $unit * 2;
|
||||
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: $unit * 1.6;
|
||||
font-weight: 400;
|
||||
line-height: $unit * 2.4;
|
||||
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: $unit * 1.6;
|
||||
font-weight: 400;
|
||||
line-height: $unit * 2.8;
|
||||
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: $unit * 1.4;
|
||||
line-height: $unit * 2.4;
|
||||
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: $unit * 1.4;
|
||||
font-weight: 400;
|
||||
line-height: $unit * 2.4;
|
||||
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: $unit * 1.2;
|
||||
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: $unit * 2.4;
|
||||
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: $unit * 1.4;
|
||||
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: $unit * 1.4;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
'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;
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
.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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
.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%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,177 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.AppBar = exports.appBarFactory = 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 _IconButton = require('../button/IconButton.js');
|
||||
|
||||
var _IconButton2 = _interopRequireDefault(_IconButton);
|
||||
|
||||
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(IconButton) {
|
||||
var AppBar = function (_React$Component) {
|
||||
_inherits(AppBar, _React$Component);
|
||||
|
||||
function AppBar() {
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, AppBar);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AppBar.__proto__ || Object.getPrototypeOf(AppBar)).call.apply(_ref, [this].concat(args))), _this), _this.state = { hidden: false, height: 0 }, _this.initializeScroll = function () {
|
||||
window.addEventListener('scroll', _this.handleScroll);
|
||||
|
||||
var _this$rootNode$getBou = _this.rootNode.getBoundingClientRect(),
|
||||
height = _this$rootNode$getBou.height;
|
||||
|
||||
_this.curScroll = window.scrollY;
|
||||
_this.setState({ height: height });
|
||||
}, _this.endScroll = function () {
|
||||
window.removeEventListener('scroll', _this.handleScroll);
|
||||
}, _this.handleScroll = function () {
|
||||
var scrollDiff = _this.curScroll - window.scrollY;
|
||||
var hidden = scrollDiff < 0 && window.scrollY !== undefined && window.scrollY > _this.state.height;
|
||||
_this.setState({ hidden: hidden });
|
||||
_this.curScroll = window.scrollY;
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(AppBar, [{
|
||||
key: 'componentDidMount',
|
||||
value: function componentDidMount() {
|
||||
if (this.props.scrollHide) {
|
||||
this.initializeScroll();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillReceiveProps',
|
||||
value: function componentWillReceiveProps(nextProps) {
|
||||
if (!this.props.scrollHide && nextProps.scrollHide) {
|
||||
this.initializeScroll();
|
||||
}
|
||||
|
||||
if (this.props.scrollHide && !nextProps.scrollHide) {
|
||||
this.endScroll();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillUnmount',
|
||||
value: function componentWillUnmount() {
|
||||
if (this.props.scrollHide) {
|
||||
this.endScroll();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _classnames,
|
||||
_this2 = this;
|
||||
|
||||
var _props = this.props,
|
||||
children = _props.children,
|
||||
leftIcon = _props.leftIcon,
|
||||
onLeftIconClick = _props.onLeftIconClick,
|
||||
onRightIconClick = _props.onRightIconClick,
|
||||
rightIcon = _props.rightIcon,
|
||||
theme = _props.theme,
|
||||
title = _props.title;
|
||||
|
||||
var className = (0, _classnames3.default)(theme.appBar, (_classnames = {}, _defineProperty(_classnames, theme.fixed, this.props.fixed), _defineProperty(_classnames, theme.flat, this.props.flat), _defineProperty(_classnames, theme.scrollHide, this.state.hidden), _classnames), this.props.className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'header',
|
||||
{
|
||||
className: className,
|
||||
'data-react-toolbox': 'app-bar',
|
||||
ref: function ref(node) {
|
||||
_this2.rootNode = node;
|
||||
}
|
||||
},
|
||||
leftIcon && _react2.default.createElement(IconButton, {
|
||||
inverse: true,
|
||||
className: (0, _classnames3.default)(theme.leftIcon),
|
||||
onClick: onLeftIconClick,
|
||||
icon: leftIcon }),
|
||||
title && _react2.default.createElement(
|
||||
'h1',
|
||||
{ className: (0, _classnames3.default)(theme.title) },
|
||||
title
|
||||
),
|
||||
children,
|
||||
rightIcon && _react2.default.createElement(IconButton, {
|
||||
inverse: true,
|
||||
className: (0, _classnames3.default)(theme.rightIcon),
|
||||
onClick: onRightIconClick,
|
||||
icon: rightIcon })
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return AppBar;
|
||||
}(_react2.default.Component);
|
||||
|
||||
AppBar.propTypes = {
|
||||
children: _react.PropTypes.node,
|
||||
className: _react.PropTypes.string,
|
||||
fixed: _react.PropTypes.bool,
|
||||
flat: _react.PropTypes.bool,
|
||||
leftIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
onLeftIconClick: _react.PropTypes.func,
|
||||
onRightIconClick: _react.PropTypes.func,
|
||||
rightIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
scrollHide: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
appBar: _react.PropTypes.string,
|
||||
fixed: _react.PropTypes.string,
|
||||
flat: _react.PropTypes.string,
|
||||
leftIcon: _react.PropTypes.string,
|
||||
rightIcon: _react.PropTypes.string,
|
||||
title: _react.PropTypes.string
|
||||
}),
|
||||
title: _react.PropTypes.string
|
||||
};
|
||||
AppBar.defaultProps = {
|
||||
className: '',
|
||||
fixed: false,
|
||||
flat: false,
|
||||
scrollHide: false
|
||||
};
|
||||
|
||||
|
||||
return AppBar;
|
||||
};
|
||||
|
||||
var AppBar = factory(_IconButton2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.APP_BAR)(AppBar);
|
||||
exports.appBarFactory = factory;
|
||||
exports.AppBar = AppBar;
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
$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-height-m-portrait: 5.6 * $unit !default;
|
||||
$appbar-height-m-landscape: 4.8 * $unit !default;
|
||||
$appbar-h-padding: 2.4 * $unit !default;
|
||||
$appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding !default;
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface AppBarTheme {
|
||||
/**
|
||||
* Used for the component root element.
|
||||
*/
|
||||
appBar?: string;
|
||||
/**
|
||||
* Added to the root element when the app bar is fixed.
|
||||
*/
|
||||
fixed?: string;
|
||||
/**
|
||||
* Added to the root element when the app bar is flat.
|
||||
*/
|
||||
flat?: string;
|
||||
/**
|
||||
* Used as the app bar title.
|
||||
*/
|
||||
title ?: string;
|
||||
/**
|
||||
* Added to the left icon app bar element.
|
||||
*/
|
||||
leftIcon?: string;
|
||||
/**
|
||||
* Added to the right icon app bar element.
|
||||
*/
|
||||
rightIcon?: string;
|
||||
}
|
||||
|
||||
interface AppBarProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Determine if the bar should have position fixed or relative.
|
||||
* @default false
|
||||
*/
|
||||
fixed?: boolean;
|
||||
/**
|
||||
* If true, the AppBar shows a shadow.
|
||||
* @default false
|
||||
*/
|
||||
flat?: boolean;
|
||||
/**
|
||||
* If it exists it is used as the AppBar title
|
||||
*/
|
||||
title?: string;
|
||||
/**
|
||||
* If it exists it is used as the AppBar left icon
|
||||
*/
|
||||
leftIcon?: string;
|
||||
/**
|
||||
* Called when the left icon is clicked
|
||||
*/
|
||||
onLeftIconClick?: Function;
|
||||
/**
|
||||
* If it exists it is used as the AppBar right icon
|
||||
*/
|
||||
rightIcon?: string;
|
||||
/**
|
||||
* Called when the righticon is clicked
|
||||
*/
|
||||
onRightIconClick?: Function;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: AppBarTheme;
|
||||
}
|
||||
|
||||
export class AppBar extends React.Component<AppBarProps, {}> { }
|
||||
|
||||
export default AppBar;
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.AppBar = undefined;
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _AppBar = require('./AppBar.js');
|
||||
|
||||
var _button = require('../button');
|
||||
|
||||
var _theme = require('./theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var AppBar = (0, _AppBar.appBarFactory)(_button.IconButton);
|
||||
var ThemedAppBar = (0, _reactCssThemr.themr)(_identifiers.APP_BAR, _theme2.default)(AppBar);
|
||||
|
||||
exports.default = ThemedAppBar;
|
||||
exports.AppBar = ThemedAppBar;
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
|
||||
.appBar {
|
||||
display: flex;
|
||||
height: $appbar-height;
|
||||
align-items: center;
|
||||
padding: 0 $appbar-h-padding;
|
||||
color: $appbar-contrast;
|
||||
background: $appbar-color;
|
||||
|
||||
@media screen and (max-width: $layout-breakpoint-xxs) and (orientation: portrait) {
|
||||
height: $appbar-height-m-portrait;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $layout-breakpoint-xs) and (orientation: landscape) {
|
||||
height: $appbar-height-m-landscape;
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
font-size: 1.8 * $unit;
|
||||
font-weight: bold;
|
||||
> small {
|
||||
font-size: 1.8 * $unit;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.leftIcon {
|
||||
margin-left: -1.2 * $unit;
|
||||
}
|
||||
|
||||
.rightIcon {
|
||||
margin-right: -1.2 * $unit;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transition-duration: .5s;
|
||||
transition-property: transform;
|
||||
|
||||
&.scrollHide {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,498 +0,0 @@
|
|||
'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 _ref;
|
||||
|
||||
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, (_ref = Autocomplete.__proto__ || Object.getPrototypeOf(Autocomplete)).call.apply(_ref, [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 showAllSuggestions = _this.props.showSuggestionsWhenValueIsSet;
|
||||
|
||||
var query = _this.query(key);
|
||||
if (_this.props.onChange) _this.props.onChange(key, event);
|
||||
if (_this.props.keepFocusOnChange) {
|
||||
_this.setState({ query: query, showAllSuggestions: showAllSuggestions });
|
||||
} else {
|
||||
_this.setState({ focus: false, query: query, showAllSuggestions: showAllSuggestions }, function () {
|
||||
_reactDom2.default.findDOMNode(_this).querySelector('input').blur();
|
||||
});
|
||||
}
|
||||
}, _this.handleQueryBlur = function (event) {
|
||||
if (_this.state.focus) _this.setState({ focus: false });
|
||||
if (_this.props.onBlur) _this.props.onBlur(event, _this.state.active);
|
||||
}, _this.handleQueryChange = function (value) {
|
||||
_this.setState({ query: value, showAllSuggestions: false, active: null });
|
||||
}, _this.handleQueryFocus = function () {
|
||||
_this.suggestionsNode.scrollTop = 0;
|
||||
_this.setState({ active: '', focus: true });
|
||||
if (_this.props.onFocus) _this.props.onFocus();
|
||||
}, _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: '' });
|
||||
}
|
||||
|
||||
if (event.which === 13) {
|
||||
var target = _this.state.active;
|
||||
if (!target) {
|
||||
target = _this.props.allowCreate ? _this.state.query : [].concat(_toConsumableArray(_this.suggestions().keys()))[0];
|
||||
_this.setState({ active: target });
|
||||
}
|
||||
_this.select(event, target);
|
||||
}
|
||||
}, _this.handleQueryKeyUp = function (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 (event) {
|
||||
_this.setState({ active: event.target.id });
|
||||
}, _this.select = function (event, target) {
|
||||
_events2.default.pauseEvent(event);
|
||||
var values = _this.values(_this.props.value);
|
||||
var newValue = target === void 0 ? event.target.id : target;
|
||||
_this.handleChange([newValue].concat(_toConsumableArray(values.keys())), event);
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(Autocomplete, [{
|
||||
key: 'componentWillReceiveProps',
|
||||
value: function componentWillReceiveProps(nextProps) {
|
||||
if (!this.props.multiple) {
|
||||
this.setState({
|
||||
query: this.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 true;
|
||||
}
|
||||
}, {
|
||||
key: 'calculateDirection',
|
||||
value: function calculateDirection() {
|
||||
if (this.props.direction === 'auto') {
|
||||
var client = _reactDom2.default.findDOMNode(this.inputNode).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) {
|
||||
var query_value = '';
|
||||
if (!this.props.multiple && key) {
|
||||
var source_value = this.source().get(key);
|
||||
query_value = source_value ? source_value : key;
|
||||
}
|
||||
return query_value;
|
||||
}
|
||||
}, {
|
||||
key: 'suggestions',
|
||||
value: function suggestions() {
|
||||
var suggest = new Map();
|
||||
var rawQuery = this.state.query || (this.props.multiple ? '' : this.props.value);
|
||||
var query = (rawQuery || '').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),
|
||||
key = _step$value[0],
|
||||
value = _step$value[1];
|
||||
|
||||
if (!values.has(key) && this.matches(value.toLowerCase().trim(), 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),
|
||||
key = _step2$value[0],
|
||||
value = _step2$value[1];
|
||||
|
||||
if (this.matches(value.toLowerCase().trim(), 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: 'matches',
|
||||
value: function matches(value, query) {
|
||||
var suggestionMatch = this.props.suggestionMatch;
|
||||
|
||||
|
||||
if (suggestionMatch === 'start') {
|
||||
return value.startsWith(query);
|
||||
} else if (suggestionMatch === 'anywhere') {
|
||||
return value.includes(query);
|
||||
} else if (suggestionMatch === 'word') {
|
||||
var re = new RegExp('\\b' + query, 'g');
|
||||
return re.test(value);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}, {
|
||||
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),
|
||||
k = _step3$value[0],
|
||||
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: '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 (_ref2) {
|
||||
var _ref3 = _slicedToArray(_ref2, 2),
|
||||
key = _ref3[0],
|
||||
value = _ref3[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 (_ref4) {
|
||||
var _ref5 = _slicedToArray(_ref4, 2),
|
||||
key = _ref5[0],
|
||||
value = _ref5[1];
|
||||
|
||||
var className = (0, _classnames5.default)(theme.suggestion, _defineProperty({}, theme.active, _this3.state.active === key));
|
||||
return _react2.default.createElement(
|
||||
'li',
|
||||
{
|
||||
id: key,
|
||||
key: key,
|
||||
className: className,
|
||||
onMouseDown: _this3.select,
|
||||
onMouseOver: _this3.handleSuggestionHover
|
||||
},
|
||||
value
|
||||
);
|
||||
});
|
||||
|
||||
return _react2.default.createElement(
|
||||
'ul',
|
||||
{
|
||||
className: (0, _classnames5.default)(theme.suggestions, _defineProperty({}, theme.up, this.state.direction === 'up')),
|
||||
ref: function ref(node) {
|
||||
_this3.suggestionsNode = node;
|
||||
}
|
||||
},
|
||||
suggestions
|
||||
);
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _this4 = this;
|
||||
|
||||
var _props = this.props,
|
||||
allowCreate = _props.allowCreate,
|
||||
error = _props.error,
|
||||
label = _props.label,
|
||||
source = _props.source,
|
||||
suggestionMatch = _props.suggestionMatch,
|
||||
selectedPosition = _props.selectedPosition,
|
||||
keepFocusOnChange = _props.keepFocusOnChange,
|
||||
showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet,
|
||||
theme = _props.theme,
|
||||
other = _objectWithoutProperties(_props, ['allowCreate', 'error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'keepFocusOnChange', 'showSuggestionsWhenValueIsSet', '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: function ref(node) {
|
||||
_this4.inputNode = node;
|
||||
},
|
||||
autoComplete: 'off',
|
||||
className: theme.input,
|
||||
error: error,
|
||||
label: label,
|
||||
onBlur: this.handleQueryBlur,
|
||||
onChange: this.handleQueryChange,
|
||||
onFocus: this.handleQueryFocus,
|
||||
onKeyDown: this.handleQueryKeyDown,
|
||||
onKeyUp: this.handleQueryKeyUp,
|
||||
theme: theme,
|
||||
themeNamespace: 'input',
|
||||
value: this.state.query
|
||||
})),
|
||||
this.renderSuggestions(),
|
||||
this.props.selectedPosition === 'below' ? this.renderSelected() : null
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Autocomplete;
|
||||
}(_react.Component);
|
||||
|
||||
Autocomplete.propTypes = {
|
||||
allowCreate: _react.PropTypes.bool,
|
||||
className: _react.PropTypes.string,
|
||||
direction: _react.PropTypes.oneOf(['auto', 'up', 'down']),
|
||||
disabled: _react.PropTypes.bool,
|
||||
error: _react.PropTypes.string,
|
||||
keepFocusOnChange: _react.PropTypes.bool,
|
||||
label: _react.PropTypes.string,
|
||||
multiple: _react.PropTypes.bool,
|
||||
onBlur: _react.PropTypes.func,
|
||||
onChange: _react.PropTypes.func,
|
||||
onFocus: _react.PropTypes.func,
|
||||
selectedPosition: _react.PropTypes.oneOf(['above', 'below']),
|
||||
showSuggestionsWhenValueIsSet: _react.PropTypes.bool,
|
||||
source: _react.PropTypes.any,
|
||||
suggestionMatch: _react.PropTypes.oneOf(['start', 'anywhere', 'word']),
|
||||
theme: _react.PropTypes.shape({
|
||||
active: _react.PropTypes.string,
|
||||
autocomplete: _react.PropTypes.string,
|
||||
focus: _react.PropTypes.string,
|
||||
input: _react.PropTypes.string,
|
||||
suggestion: _react.PropTypes.string,
|
||||
suggestions: _react.PropTypes.string,
|
||||
up: _react.PropTypes.string,
|
||||
value: _react.PropTypes.string,
|
||||
values: _react.PropTypes.string
|
||||
}),
|
||||
value: _react.PropTypes.any
|
||||
};
|
||||
Autocomplete.defaultProps = {
|
||||
allowCreate: false,
|
||||
className: '',
|
||||
direction: 'auto',
|
||||
keepFocusOnChange: false,
|
||||
multiple: true,
|
||||
selectedPosition: 'above',
|
||||
showSuggestionsWhenValueIsSet: false,
|
||||
source: {},
|
||||
suggestionMatch: 'start'
|
||||
};
|
||||
|
||||
|
||||
return Autocomplete;
|
||||
};
|
||||
|
||||
var Autocomplete = factory(_Chip2.default, _Input2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.AUTOCOMPLETE)(Autocomplete);
|
||||
exports.autocompleteFactory = factory;
|
||||
exports.Autocomplete = Autocomplete;
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
$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;
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface AutocompleteTheme {
|
||||
/**
|
||||
* Used for a suggestion when it's active.
|
||||
*/
|
||||
active?: string;
|
||||
/**
|
||||
* Used for the root element.
|
||||
*/
|
||||
autocomplete?: string;
|
||||
/**
|
||||
* Used when the input is focused.
|
||||
*/
|
||||
focus?: string;
|
||||
/**
|
||||
* Used to style the Input component.
|
||||
*/
|
||||
input?: string;
|
||||
/**
|
||||
* Used for the label.
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* Used to style each suggestion.
|
||||
*/
|
||||
suggestion?: string;
|
||||
/**
|
||||
* Used to style the suggestions container.
|
||||
*/
|
||||
suggestions?: string;
|
||||
/**
|
||||
* Used for the suggestions when it's opening to the top.
|
||||
*/
|
||||
up?: string;
|
||||
/**
|
||||
* Classname used for a single value.
|
||||
*/
|
||||
value?: string;
|
||||
/**
|
||||
* Classname used for the values container.
|
||||
*/
|
||||
values?: string;
|
||||
}
|
||||
|
||||
interface AutocompleteProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Determines the opening direction. It can be auto, up or down.
|
||||
* @default auto
|
||||
*/
|
||||
direction?: "auto" | "up" | "down";
|
||||
/**
|
||||
* If true, component will be disabled.
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* Sets the error string for the internal input element.
|
||||
* @default false
|
||||
*/
|
||||
error?: string;
|
||||
/**
|
||||
* The text string to use for the floating label element.
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* If true, component can hold multiple values.
|
||||
*/
|
||||
multiple?: boolean;
|
||||
/**
|
||||
* Callback function that is fired when the components's value changes.
|
||||
* @default auto
|
||||
*/
|
||||
onChange?: Function;
|
||||
/**
|
||||
* Determines if the selected list is shown above or below input. It can be above or below.
|
||||
* @default above
|
||||
*/
|
||||
selectedPosition?: "above" | "below";
|
||||
/**
|
||||
* If true, the list of suggestions will not be filtered when a value is selected.
|
||||
* @default false
|
||||
*/
|
||||
showSuggestionsWhenValueIsSet?: boolean;
|
||||
/**
|
||||
* Object of key/values or array representing all items suggested.
|
||||
*/
|
||||
source?: any;
|
||||
/**
|
||||
* Determines how suggestions are supplied.
|
||||
* @default start
|
||||
*/
|
||||
suggestionMatch?: "start" | "anywhere" | "word";
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: AutocompleteTheme;
|
||||
/**
|
||||
* Value or array of values currently selected component.
|
||||
*/
|
||||
value?: any;
|
||||
}
|
||||
|
||||
export class Autocomplete extends React.Component<AutocompleteProps, {}> { }
|
||||
|
||||
export default Autocomplete;
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
'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;
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
@import "../input/config";
|
||||
|
||||
.autocomplete {
|
||||
position: relative;
|
||||
padding: $unit 0;
|
||||
&.focus {
|
||||
.suggestions {
|
||||
max-height: $autocomplete-overflow-max-height;
|
||||
visibility: visible;
|
||||
box-shadow: $zdepth-shadow-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
'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 _classnames = require('classnames');
|
||||
|
||||
var _classnames2 = _interopRequireDefault(_classnames);
|
||||
|
||||
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,
|
||||
className = _ref.className,
|
||||
cover = _ref.cover,
|
||||
icon = _ref.icon,
|
||||
image = _ref.image,
|
||||
theme = _ref.theme,
|
||||
title = _ref.title,
|
||||
other = _objectWithoutProperties(_ref, ['children', 'className', 'cover', 'icon', 'image', 'theme', 'title']);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
_extends({ 'data-react-toolbox': 'avatar', className: (0, _classnames2.default)(theme.avatar, className) }, other),
|
||||
children,
|
||||
cover && typeof image === 'string' && _react2.default.createElement('span', { alt: title, className: theme.image, style: { backgroundImage: 'url(' + image + ')' } }),
|
||||
!cover && (typeof image === 'string' ? _react2.default.createElement('img', { alt: title, 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,
|
||||
cover: _react.PropTypes.bool,
|
||||
icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
image: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
theme: _react.PropTypes.shape({
|
||||
avatar: _react.PropTypes.string,
|
||||
image: _react.PropTypes.string,
|
||||
letter: _react.PropTypes.string
|
||||
}),
|
||||
title: _react.PropTypes.string
|
||||
};
|
||||
|
||||
Avatar.defaultProps = {
|
||||
cover: false
|
||||
};
|
||||
|
||||
return Avatar;
|
||||
};
|
||||
|
||||
var Avatar = factory(_FontIcon2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.AVATAR)(Avatar);
|
||||
exports.avatarFactory = factory;
|
||||
exports.Avatar = Avatar;
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
$avatar-color: $color-white !default;
|
||||
$avatar-background: $palette-grey-500 !default;
|
||||
$avatar-size: 4 * $unit !default;
|
||||
$avatar-font-size: 2.4 * $unit !default;
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface AvatarTheme {
|
||||
/**
|
||||
* Used for the root class of the element.
|
||||
*/
|
||||
avatar?: string;
|
||||
/**
|
||||
* Added to the root element when the component has image.
|
||||
*/
|
||||
image?: string;
|
||||
/**
|
||||
* Used for the root element if the component shows the letter.
|
||||
*/
|
||||
letter?: string;
|
||||
}
|
||||
|
||||
interface AvatarProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Set to true if your image is not squared so it will be used as a cover for the element.
|
||||
*/
|
||||
cover?: boolean;
|
||||
/**
|
||||
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
|
||||
*/
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* An image source or an image element.
|
||||
*/
|
||||
image?: React.ReactNode | string;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: AvatarTheme;
|
||||
/**
|
||||
* A title for the image. If no image is provided, the first letter will be displayed as the avatar.
|
||||
*/
|
||||
title?: string;
|
||||
}
|
||||
|
||||
export class Avatar extends React.Component<AvatarProps, {}> { }
|
||||
|
||||
export default Avatar;
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
'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;
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@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;
|
||||
}
|
||||
|
|
@ -1,168 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.BrowseButton = exports.browseButtonFactory = 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 SimpleBrowseButton = function (_Component) {
|
||||
_inherits(SimpleBrowseButton, _Component);
|
||||
|
||||
function SimpleBrowseButton() {
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, SimpleBrowseButton);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SimpleBrowseButton.__proto__ || Object.getPrototypeOf(SimpleBrowseButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
|
||||
_this.refs.label.blur();
|
||||
if (_this.props.onMouseUp) _this.props.onMouseUp(event);
|
||||
}, _this.handleMouseLeave = function (event) {
|
||||
_this.refs.label.blur();
|
||||
if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
|
||||
}, _this.handleFileChange = function (event) {
|
||||
if (_this.props.onChange) _this.props.onChange(event);
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(SimpleBrowseButton, [{
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _classnames;
|
||||
|
||||
var _props = this.props,
|
||||
accent = _props.accent,
|
||||
children = _props.children,
|
||||
className = _props.className,
|
||||
flat = _props.flat,
|
||||
floating = _props.floating,
|
||||
icon = _props.icon,
|
||||
inverse = _props.inverse,
|
||||
label = _props.label,
|
||||
mini = _props.mini,
|
||||
neutral = _props.neutral,
|
||||
primary = _props.primary,
|
||||
theme = _props.theme,
|
||||
raised = _props.raised,
|
||||
others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
|
||||
|
||||
var element = 'label';
|
||||
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, {
|
||||
ref: 'label',
|
||||
className: classes,
|
||||
disabled: this.props.disabled,
|
||||
onMouseUp: this.handleMouseUp,
|
||||
onMouseLeave: this.handleMouseLeave,
|
||||
'data-react-toolbox': 'label'
|
||||
});
|
||||
|
||||
return _react2.default.createElement(element, props, icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null, _react2.default.createElement(
|
||||
'span',
|
||||
null,
|
||||
label
|
||||
), _react2.default.createElement('input', { className: classes, type: 'file', onChange: this.handleFileChange }), children);
|
||||
}
|
||||
}]);
|
||||
|
||||
return SimpleBrowseButton;
|
||||
}(_react.Component);
|
||||
|
||||
SimpleBrowseButton.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,
|
||||
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,
|
||||
onChange: _react.PropTypes.func,
|
||||
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
|
||||
};
|
||||
SimpleBrowseButton.defaultProps = {
|
||||
accent: false,
|
||||
className: '',
|
||||
flat: false,
|
||||
floating: false,
|
||||
mini: false,
|
||||
neutral: true,
|
||||
primary: false,
|
||||
raised: false
|
||||
};
|
||||
|
||||
|
||||
return ripple(SimpleBrowseButton);
|
||||
};
|
||||
|
||||
var BrowseButton = factory((0, _Ripple2.default)({ centered: false }), _FontIcon2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(BrowseButton);
|
||||
exports.browseButtonFactory = factory;
|
||||
exports.BrowseButton = BrowseButton;
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
'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 _ref;
|
||||
|
||||
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, (_ref = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref, [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,
|
||||
accent = _props.accent,
|
||||
children = _props.children,
|
||||
className = _props.className,
|
||||
flat = _props.flat,
|
||||
floating = _props.floating,
|
||||
href = _props.href,
|
||||
icon = _props.icon,
|
||||
inverse = _props.inverse,
|
||||
label = _props.label,
|
||||
mini = _props.mini,
|
||||
neutral = _props.neutral,
|
||||
primary = _props.primary,
|
||||
theme = _props.theme,
|
||||
raised = _props.raised,
|
||||
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;
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
'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 _ref;
|
||||
|
||||
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, (_ref = IconButton.__proto__ || Object.getPrototypeOf(IconButton)).call.apply(_ref, [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,
|
||||
accent = _props.accent,
|
||||
children = _props.children,
|
||||
className = _props.className,
|
||||
href = _props.href,
|
||||
icon = _props.icon,
|
||||
inverse = _props.inverse,
|
||||
neutral = _props.neutral,
|
||||
primary = _props.primary,
|
||||
theme = _props.theme,
|
||||
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 ? typeof icon === 'string' ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : icon : null, children);
|
||||
}
|
||||
}]);
|
||||
|
||||
return IconButton;
|
||||
}(_react.Component);
|
||||
|
||||
IconButton.propTypes = {
|
||||
accent: _react.PropTypes.bool,
|
||||
children: _react.PropTypes.node,
|
||||
className: _react.PropTypes.string,
|
||||
disabled: _react.PropTypes.bool,
|
||||
href: _react.PropTypes.string,
|
||||
icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
inverse: _react.PropTypes.bool,
|
||||
neutral: _react.PropTypes.bool,
|
||||
onMouseLeave: _react.PropTypes.func,
|
||||
onMouseUp: _react.PropTypes.func,
|
||||
primary: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.object,
|
||||
type: _react.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;
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
'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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
$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;
|
||||
|
|
@ -1,17 +0,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,337 +0,0 @@
|
|||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface ButtonTheme {
|
||||
/**
|
||||
* Used for the root in case button is accent.
|
||||
*/
|
||||
accent?: string;
|
||||
/**
|
||||
* Used for the root element in any button.
|
||||
*/
|
||||
button?: string;
|
||||
/**
|
||||
* Used when the button is flat for the root element.
|
||||
*/
|
||||
flat?: string;
|
||||
/**
|
||||
* Used when the button is floating for the root element.
|
||||
*/
|
||||
floating?: string;
|
||||
/**
|
||||
* For the icon inside a button.
|
||||
*/
|
||||
icon?: string;
|
||||
/**
|
||||
* Used when colors are inverted.
|
||||
*/
|
||||
inverse?: string;
|
||||
/**
|
||||
* Used for mini floating buttons.
|
||||
*/
|
||||
mini?: string;
|
||||
/**
|
||||
* Used for neutral colored buttons.
|
||||
*/
|
||||
neutral?: string;
|
||||
/**
|
||||
* Used for primary buttons when button is primary.
|
||||
*/
|
||||
primary?: string;
|
||||
/**
|
||||
* Used when the button is raised for root element.
|
||||
*/
|
||||
raised?: string;
|
||||
/**
|
||||
* Used for the ripple element.
|
||||
*/
|
||||
rippleWrapper?: string;
|
||||
/**
|
||||
* Used for toggle buttons in the root element.
|
||||
*/
|
||||
toggle?: string;
|
||||
}
|
||||
|
||||
interface ButtonProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Indicates if the button should have accent color.
|
||||
* @default false
|
||||
*/
|
||||
accent?: boolean;
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, component will be disabled.
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* If true, the button will have a flat look.
|
||||
* @default false
|
||||
*/
|
||||
flat?: boolean;
|
||||
/**
|
||||
* If true, the button will have a floating look.
|
||||
* @default false
|
||||
*/
|
||||
floating?: boolean;
|
||||
/**
|
||||
* Creates a link for the button.
|
||||
*/
|
||||
href?: string;
|
||||
/**
|
||||
* Value of the icon (See Font Icon Component).
|
||||
*/
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
|
||||
*/
|
||||
inverse?: boolean;
|
||||
/**
|
||||
* The text string to use for the name of the button.
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* To be used with floating button. If true, the button will be smaller.
|
||||
* @default false
|
||||
*/
|
||||
mini?: boolean;
|
||||
/**
|
||||
* Set it to false if you don't want the neutral styles to be included.
|
||||
* @default true
|
||||
*/
|
||||
neutral?: boolean;
|
||||
/**
|
||||
* Indicates if the button should have primary color.
|
||||
* @default false
|
||||
*/
|
||||
primary?: boolean;
|
||||
/**
|
||||
* If true, the button will have a raised look.
|
||||
* @default false
|
||||
*/
|
||||
raised?: boolean;
|
||||
/**
|
||||
* If true, component will have a ripple effect on click.
|
||||
* @default true
|
||||
*/
|
||||
ripple?: boolean;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: ButtonTheme;
|
||||
}
|
||||
|
||||
export class Button extends React.Component<ButtonProps, {}> { }
|
||||
|
||||
export interface IconButtonTheme {
|
||||
/**
|
||||
* Used for the root in case button is accent.
|
||||
*/
|
||||
accent?: string;
|
||||
/**
|
||||
* Used for the root element in any button.
|
||||
*/
|
||||
button?: string;
|
||||
/**
|
||||
* For the icon inside a button.
|
||||
*/
|
||||
icon?: string;
|
||||
/**
|
||||
* Used when colors are inverted.
|
||||
*/
|
||||
inverse?: string;
|
||||
/**
|
||||
* Used for neutral colored buttons.
|
||||
*/
|
||||
neutral?: string;
|
||||
/**
|
||||
* Used for primary buttons when button is primary.
|
||||
*/
|
||||
primary?: string;
|
||||
/**
|
||||
* Used for the ripple element.
|
||||
*/
|
||||
rippleWrapper?: string;
|
||||
/**
|
||||
* Used for toggle buttons in the root element.
|
||||
*/
|
||||
toggle?: string;
|
||||
}
|
||||
|
||||
interface IconButtonProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Indicates if the button should have accent color.
|
||||
* @default false
|
||||
*/
|
||||
accent?: boolean;
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, component will be disabled.
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* Creates a link for the button.
|
||||
*/
|
||||
href?: string;
|
||||
/**
|
||||
* Value of the icon (See Font Icon Component).
|
||||
*/
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
|
||||
*/
|
||||
inverse?: boolean;
|
||||
/**
|
||||
* Set it to false if you don't want the neutral styles to be included.
|
||||
* @default true
|
||||
*/
|
||||
neutral?: boolean;
|
||||
/**
|
||||
* Indicates if the button should have primary color.
|
||||
* @default false
|
||||
*/
|
||||
primary?: boolean;
|
||||
/**
|
||||
* If true, component will have a ripple effect on click.
|
||||
* @default true
|
||||
*/
|
||||
ripple?: boolean;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: IconButtonTheme;
|
||||
}
|
||||
|
||||
export class IconButton extends React.Component<IconButtonProps, {}> { }
|
||||
|
||||
export interface BrowseButtonTheme {
|
||||
/**
|
||||
* Used for the root in case button is accent.
|
||||
*/
|
||||
accent?: string;
|
||||
/**
|
||||
* Used for the root element in any button.
|
||||
*/
|
||||
button?: string;
|
||||
/**
|
||||
* Used when the button is flat for the root element.
|
||||
*/
|
||||
flat?: string;
|
||||
/**
|
||||
* Used when the button is floating for the root element.
|
||||
*/
|
||||
floating?: string;
|
||||
/**
|
||||
* For the icon inside a button.
|
||||
*/
|
||||
icon?: string;
|
||||
/**
|
||||
* Used when colors are inverted.
|
||||
*/
|
||||
inverse?: string;
|
||||
/**
|
||||
* Used for mini floating buttons.
|
||||
*/
|
||||
mini?: string;
|
||||
/**
|
||||
* Used for neutral colored buttons.
|
||||
*/
|
||||
neutral?: string;
|
||||
/**
|
||||
* Used for primary buttons when button is primary.
|
||||
*/
|
||||
primary?: string;
|
||||
/**
|
||||
* Used when the button is raised for root element.
|
||||
*/
|
||||
raised?: string;
|
||||
/**
|
||||
* Used for the ripple element.
|
||||
*/
|
||||
rippleWrapper?: string;
|
||||
/**
|
||||
* Used for toggle buttons in the root element.
|
||||
*/
|
||||
toggle?: string;
|
||||
}
|
||||
|
||||
interface BrowseButtonProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Indicates if the button should have accent color.
|
||||
* @default false
|
||||
*/
|
||||
accent?: boolean;
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, component will be disabled.
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* If true, the button will have a flat look.
|
||||
* @default false
|
||||
*/
|
||||
flat?: boolean;
|
||||
/**
|
||||
* If true, the button will have a floating look.
|
||||
* @default false
|
||||
*/
|
||||
floating?: boolean;
|
||||
/**
|
||||
* Creates a link for the button.
|
||||
*/
|
||||
href?: string;
|
||||
/**
|
||||
* Value of the icon (See Font Icon Component).
|
||||
*/
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
|
||||
*/
|
||||
inverse?: boolean;
|
||||
/**
|
||||
* The text string to use for the name of the button.
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* To be used with floating button. If true, the button will be smaller.
|
||||
* @default false
|
||||
*/
|
||||
mini?: boolean;
|
||||
/**
|
||||
* Set it to false if you don't want the neutral styles to be included.
|
||||
* @default true
|
||||
*/
|
||||
neutral?: boolean;
|
||||
/**
|
||||
* Indicates if the button should have primary color.
|
||||
* @default false
|
||||
*/
|
||||
primary?: boolean;
|
||||
/**
|
||||
* If true, the button will have a raised look.
|
||||
* @default false
|
||||
*/
|
||||
raised?: boolean;
|
||||
/**
|
||||
* If true, component will have a ripple effect on click.
|
||||
* @default true
|
||||
*/
|
||||
ripple?: boolean;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: BrowseButtonTheme;
|
||||
}
|
||||
|
||||
export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.BrowseButton = exports.IconButton = exports.Button = undefined;
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _Button = require('./Button.js');
|
||||
|
||||
var _BrowseButton = require('./BrowseButton.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 BrowseButton = (0, _BrowseButton.browseButtonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
|
||||
var ThemedButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(Button);
|
||||
var ThemedIconButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(IconButton);
|
||||
var ThemedBrowseButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(BrowseButton);
|
||||
|
||||
exports.default = ThemedButton;
|
||||
exports.Button = ThemedButton;
|
||||
exports.IconButton = ThemedIconButton;
|
||||
exports.BrowseButton = ThemedBrowseButton;
|
||||
|
|
@ -1,182 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
@import "./mixins";
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
|
||||
> input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left:0;
|
||||
z-index: 0;
|
||||
width: 0.1px;
|
||||
height: 0.1px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
%button {
|
||||
@include typo-button();
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: $button-height;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: $button-height;
|
||||
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: top;
|
||||
}
|
||||
> svg {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: $button-height;
|
||||
font-size: 120%;
|
||||
vertical-align: top;
|
||||
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: top;
|
||||
}
|
||||
> .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);
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
'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,
|
||||
className = _ref.className,
|
||||
raised = _ref.raised,
|
||||
theme = _ref.theme,
|
||||
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: _react.PropTypes.shape({
|
||||
card: _react.PropTypes.string,
|
||||
raised: _react.PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(Card);
|
||||
exports.Card = Card;
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
'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,
|
||||
className = _ref.className,
|
||||
theme = _ref.theme,
|
||||
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: _react.PropTypes.shape({
|
||||
cardActions: _react.PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardActions);
|
||||
exports.CardActions = CardActions;
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
'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,
|
||||
children = _ref.children,
|
||||
className = _ref.className,
|
||||
color = _ref.color,
|
||||
contentOverlay = _ref.contentOverlay,
|
||||
image = _ref.image,
|
||||
theme = _ref.theme,
|
||||
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: _react.PropTypes.shape({
|
||||
cardMedia: _react.PropTypes.string,
|
||||
content: _react.PropTypes.string,
|
||||
contentOverlay: _react.PropTypes.string,
|
||||
square: _react.PropTypes.string,
|
||||
wide: _react.PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardMedia);
|
||||
exports.CardMedia = CardMedia;
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
'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,
|
||||
className = _ref.className,
|
||||
theme = _ref.theme,
|
||||
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: _react.PropTypes.shape({
|
||||
cardText: _react.PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.CARD)(CardText);
|
||||
exports.CardText = CardText;
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
'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,
|
||||
children = _ref.children,
|
||||
className = _ref.className,
|
||||
subtitle = _ref.subtitle,
|
||||
theme = _ref.theme,
|
||||
title = _ref.title,
|
||||
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, theme: theme }) : 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: _react.PropTypes.shape({
|
||||
large: _react.PropTypes.string,
|
||||
title: _react.PropTypes.string,
|
||||
small: _react.PropTypes.string,
|
||||
subtitle: _react.PropTypes.string
|
||||
}),
|
||||
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;
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
$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;
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface CardTheme {
|
||||
card?: string;
|
||||
raised?: string;
|
||||
}
|
||||
|
||||
interface CardProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
raised?: boolean;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: CardTheme;
|
||||
}
|
||||
|
||||
export class Card extends React.Component<CardProps, {}> { }
|
||||
|
||||
export interface CardActionsTheme {
|
||||
cardActions?: string;
|
||||
}
|
||||
|
||||
interface CardActionsProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: CardActionsTheme;
|
||||
}
|
||||
|
||||
export class CardActions extends React.Component<CardActionsProps, {}> { }
|
||||
|
||||
export interface CardMediaTheme {
|
||||
cardMedia?: string;
|
||||
content?: string;
|
||||
contentOverlay?: string;
|
||||
square?: string;
|
||||
wide?: string;
|
||||
}
|
||||
|
||||
interface CardMediaProps extends ReactToolbox.Props {
|
||||
aspectRatio?: "wide" | "square";
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
color?: string;
|
||||
contentOverlay?: boolean;
|
||||
image?: React.ReactNode | string;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: CardMediaTheme;
|
||||
}
|
||||
|
||||
export class CardMedia extends React.Component<CardMediaProps, {}> { }
|
||||
|
||||
export interface CardTextTheme {
|
||||
cardText?: string;
|
||||
}
|
||||
|
||||
interface CardTextProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: CardTextTheme;
|
||||
}
|
||||
|
||||
export class CardText extends React.Component<CardTextProps, {}> { }
|
||||
|
||||
export interface CardTitleTheme {
|
||||
large?: string;
|
||||
title?: string;
|
||||
small?: string;
|
||||
subtitle?: string;
|
||||
}
|
||||
|
||||
interface CardTitleProps extends ReactToolbox.Props {
|
||||
avatar?: React.ReactNode | string;
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
subtitle?: React.ReactNode | string;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: CardTitleTheme;
|
||||
title?: React.ReactNode | string;
|
||||
}
|
||||
|
||||
export class CardTitle extends React.Component<CardTitleProps, {}> { }
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
'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;
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@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%;
|
||||
.content {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
.content > iframe, .content > video, .content > img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
display: block;
|
||||
height: 0;
|
||||
content: "";
|
||||
}
|
||||
&.wide::after {
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
&.square::after {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
'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,
|
||||
children = _ref.children,
|
||||
onMouseDown = _ref.onMouseDown,
|
||||
theme = _ref.theme,
|
||||
style = _ref.style;
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{
|
||||
'data-react-toolbox': 'check',
|
||||
className: (0, _classnames3.default)(theme.check, _defineProperty({}, theme.checked, checked)),
|
||||
onMouseDown: onMouseDown,
|
||||
style: style
|
||||
},
|
||||
children
|
||||
);
|
||||
};
|
||||
|
||||
Check.propTypes = {
|
||||
checked: _react.PropTypes.bool,
|
||||
children: _react.PropTypes.any,
|
||||
onMouseDown: _react.PropTypes.func,
|
||||
style: _react.PropTypes.object,
|
||||
theme: _react.PropTypes.shape({
|
||||
check: _react.PropTypes.string,
|
||||
checked: _react.PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
return ripple(Check);
|
||||
};
|
||||
|
||||
exports.default = factory;
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
'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 _ref;
|
||||
|
||||
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, (_ref = Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call.apply(_ref, [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.inputNode && this.inputNode.blur();
|
||||
}
|
||||
}, {
|
||||
key: 'focus',
|
||||
value: function focus() {
|
||||
this.inputNode && this.inputNode.focus();
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _this2 = this;
|
||||
|
||||
var _props = this.props,
|
||||
checked = _props.checked,
|
||||
disabled = _props.disabled,
|
||||
label = _props.label,
|
||||
style = _props.style,
|
||||
theme = _props.theme,
|
||||
others = _objectWithoutProperties(_props, ['checked', 'disabled', 'label', 'style', 'theme']);
|
||||
|
||||
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, {
|
||||
checked: checked,
|
||||
className: theme.input,
|
||||
disabled: disabled,
|
||||
onChange: function onChange() {},
|
||||
onClick: this.handleToggle,
|
||||
ref: function ref(node) {
|
||||
_this2.inputNode = node;
|
||||
},
|
||||
type: 'checkbox'
|
||||
})),
|
||||
_react2.default.createElement(Check, {
|
||||
checked: checked,
|
||||
disabled: disabled,
|
||||
rippleClassName: theme.ripple,
|
||||
style: style,
|
||||
theme: theme
|
||||
}),
|
||||
label ? _react2.default.createElement(
|
||||
'span',
|
||||
{ 'data-react-toolbox': 'label', className: theme.text },
|
||||
label
|
||||
) : null
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Checkbox;
|
||||
}(_react.Component);
|
||||
|
||||
Checkbox.propTypes = {
|
||||
checked: _react.PropTypes.bool,
|
||||
className: _react.PropTypes.string,
|
||||
disabled: _react.PropTypes.bool,
|
||||
label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
|
||||
name: _react.PropTypes.string,
|
||||
onChange: _react.PropTypes.func,
|
||||
style: _react.PropTypes.object,
|
||||
theme: _react.PropTypes.shape({
|
||||
disabled: _react.PropTypes.string,
|
||||
field: _react.PropTypes.string,
|
||||
input: _react.PropTypes.string,
|
||||
ripple: _react.PropTypes.string
|
||||
})
|
||||
};
|
||||
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;
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
$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;
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface CheckboxTheme {
|
||||
/**
|
||||
* Used as root in the check element.
|
||||
*/
|
||||
check?: string;
|
||||
/**
|
||||
* Used for the check element when it's checked.
|
||||
*/
|
||||
checked?: string;
|
||||
/**
|
||||
* Used when the component is disabled.
|
||||
*/
|
||||
disabled?: string;
|
||||
/**
|
||||
* Used as the root class of the component.
|
||||
*/
|
||||
field?: string;
|
||||
/**
|
||||
* Used for the input element.
|
||||
*/
|
||||
input?: string;
|
||||
/**
|
||||
* Used for the ripple component.
|
||||
*/
|
||||
ripple?: string;
|
||||
/**
|
||||
* Used for the text label.
|
||||
*/
|
||||
text?: string;
|
||||
}
|
||||
|
||||
interface CheckboxProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Value for the checkbox, can be true or false.
|
||||
* @default false
|
||||
*/
|
||||
checked?: boolean;
|
||||
/**
|
||||
* If true, the checkbox shown as disabled and cannot be modified.
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* Text label to attach next to the checkbox element.
|
||||
*/
|
||||
label?: React.ReactNode | string;
|
||||
/**
|
||||
* The name of the field to set in the input checkbox.
|
||||
*/
|
||||
name?: string;
|
||||
/**
|
||||
* Callback called when the checkbox is blurred.
|
||||
*/
|
||||
onBlur?: Function;
|
||||
/**
|
||||
* Callback called when the checkbox value is changed.
|
||||
*/
|
||||
onChange?: Function;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: CheckboxTheme;
|
||||
}
|
||||
|
||||
export class Checkbox extends React.Component<CheckboxProps, {}> { }
|
||||
|
||||
export default Checkbox;
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
'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;
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@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 {
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
'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,
|
||||
className = _ref.className,
|
||||
deletable = _ref.deletable,
|
||||
onDeleteClick = _ref.onDeleteClick,
|
||||
theme = _ref.theme,
|
||||
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: _react.PropTypes.shape({
|
||||
avatar: _react.PropTypes.string,
|
||||
chip: _react.PropTypes.string,
|
||||
deletable: _react.PropTypes.string,
|
||||
delete: _react.PropTypes.string,
|
||||
deleteIcon: _react.PropTypes.string,
|
||||
deleteX: _react.PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
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;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
$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;
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface ChipTheme {
|
||||
/**
|
||||
* Added to the root element when the component includes an avatar.
|
||||
*/
|
||||
avatar?: string;
|
||||
/**
|
||||
* Used for the root element.
|
||||
*/
|
||||
chip?: string;
|
||||
/**
|
||||
* Added to the root element when the component is deletable.
|
||||
*/
|
||||
deletable?: string;
|
||||
/**
|
||||
* Used for the delete element wrapper.
|
||||
*/
|
||||
delete?: string;
|
||||
/**
|
||||
* Used for the delete icon.
|
||||
*/
|
||||
deleteIcon?: string;
|
||||
/**
|
||||
* Used for the delete svg inner layer.
|
||||
*/
|
||||
deleteX?: string;
|
||||
}
|
||||
|
||||
interface ChipProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, the chip will be rendered with a delete icon.
|
||||
* @default false
|
||||
*/
|
||||
deletable?: boolean;
|
||||
/**
|
||||
* Callback to be invoked when the delete icon is clicked.
|
||||
*/
|
||||
onDeleteClick?: Function;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: ChipTheme;
|
||||
}
|
||||
|
||||
export class Chip extends React.Component<ChipProps, {}> { }
|
||||
|
||||
export default Chip;
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
'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;
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
@import "./colors";
|
||||
@import "./globals";
|
||||
@import "./mixins";
|
||||
@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);
|
||||
}
|
||||
|
||||
// -- Remove firefox default style for required inputs
|
||||
input[required]:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// -- 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;
|
||||
}
|
||||
|
|
@ -1,208 +0,0 @@
|
|||
'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 DIRECTION_STEPS = { left: -1, right: 1 };
|
||||
|
||||
var factory = function factory(IconButton) {
|
||||
var Calendar = function (_Component) {
|
||||
_inherits(Calendar, _Component);
|
||||
|
||||
function Calendar() {
|
||||
var _ref;
|
||||
|
||||
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, (_ref = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref, [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 (event) {
|
||||
var year = parseInt(event.currentTarget.id);
|
||||
var viewDate = _time2.default.setYear(_this.props.selectedDate, year);
|
||||
_this.setState({ viewDate: viewDate });
|
||||
_this.props.onChange(viewDate, false);
|
||||
}, _this.handleKeys = function (e) {
|
||||
var selectedDate = _this.props.selectedDate;
|
||||
|
||||
|
||||
if (e.which === 37 || e.which === 38 || e.which === 39 || e.which === 40 || e.which === 13) e.preventDefault();
|
||||
|
||||
switch (e.which) {
|
||||
case 13:
|
||||
_this.props.handleSelect();break; // enter
|
||||
case 37:
|
||||
_this.handleDayArrowKey(_time2.default.addDays(selectedDate, -1));break; // left
|
||||
case 38:
|
||||
_this.handleDayArrowKey(_time2.default.addDays(selectedDate, -7));break; // up
|
||||
case 39:
|
||||
_this.handleDayArrowKey(_time2.default.addDays(selectedDate, 1));break; // right
|
||||
case 40:
|
||||
_this.handleDayArrowKey(_time2.default.addDays(selectedDate, 7));break; // down
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}, _this.handleDayArrowKey = function (date) {
|
||||
_this.setState({ viewDate: date });
|
||||
_this.props.onChange(date, false);
|
||||
}, _this.changeViewMonth = function (event) {
|
||||
var direction = event.currentTarget.id;
|
||||
_this.setState({
|
||||
direction: direction,
|
||||
viewDate: _time2.default.addMonths(_this.state.viewDate, DIRECTION_STEPS[direction])
|
||||
});
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(Calendar, [{
|
||||
key: 'componentWillMount',
|
||||
value: function componentWillMount() {
|
||||
document.body.addEventListener('keydown', this.handleKeys);
|
||||
}
|
||||
}, {
|
||||
key: 'componentDidUpdate',
|
||||
value: function componentDidUpdate() {
|
||||
if (this.refs.activeYear) {
|
||||
this.scrollToActive();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillUnmount',
|
||||
value: function componentWillUnmount() {
|
||||
document.body.removeEventListener('keydown', this.handleKeys);
|
||||
}
|
||||
}, {
|
||||
key: 'scrollToActive',
|
||||
value: function scrollToActive() {
|
||||
this.refs.years.scrollTop = this.refs.activeYear.offsetTop - this.refs.years.offsetHeight / 2 + this.refs.activeYear.offsetHeight / 2;
|
||||
}
|
||||
}, {
|
||||
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 (year) {
|
||||
return _react2.default.createElement('li', {
|
||||
children: year,
|
||||
className: year === _this2.state.viewDate.getFullYear() ? _this2.props.theme.active : '',
|
||||
id: year,
|
||||
key: year,
|
||||
onClick: _this2.handleYearClick,
|
||||
ref: year === _this2.state.viewDate.getFullYear() ? 'activeYear' : undefined
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
}, {
|
||||
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, { id: 'left', className: theme.prev, icon: 'chevron_left', onClick: this.changeViewMonth }),
|
||||
_react2.default.createElement(IconButton, { id: 'right', className: theme.next, icon: 'chevron_right', onClick: this.changeViewMonth }),
|
||||
_react2.default.createElement(
|
||||
_reactAddonsCssTransitionGroup2.default,
|
||||
{ transitionName: animation, transitionEnterTimeout: 350, transitionLeaveTimeout: 350 },
|
||||
_react2.default.createElement(_CalendarMonth2.default, {
|
||||
key: this.state.viewDate.getMonth(),
|
||||
locale: this.props.locale,
|
||||
maxDate: this.props.maxDate,
|
||||
minDate: this.props.minDate,
|
||||
onDayClick: this.handleDayClick,
|
||||
selectedDate: this.props.selectedDate,
|
||||
sundayFirstDayOfWeek: this.props.sundayFirstDayOfWeek,
|
||||
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']),
|
||||
handleSelect: _react.PropTypes.func,
|
||||
locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
|
||||
maxDate: _react.PropTypes.object,
|
||||
minDate: _react.PropTypes.object,
|
||||
onChange: _react.PropTypes.func,
|
||||
selectedDate: _react.PropTypes.object,
|
||||
sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
active: _react.PropTypes.string,
|
||||
calendar: _react.PropTypes.string,
|
||||
next: _react.PropTypes.string,
|
||||
prev: _react.PropTypes.string,
|
||||
years: _react.PropTypes.string
|
||||
}),
|
||||
viewDate: _react.PropTypes.object
|
||||
};
|
||||
Calendar.defaultProps = {
|
||||
display: 'months',
|
||||
selectedDate: new Date()
|
||||
};
|
||||
|
||||
|
||||
return Calendar;
|
||||
};
|
||||
|
||||
exports.default = factory;
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
'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() {
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, Day);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Day.__proto__ || Object.getPrototypeOf(Day)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function () {
|
||||
if (!_this.props.disabled && _this.props.onClick) {
|
||||
_this.props.onClick(_this.props.day);
|
||||
}
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(Day, [{
|
||||
key: 'dayStyle',
|
||||
value: function dayStyle() {
|
||||
if (this.props.day === 1) {
|
||||
var e = this.props.sundayFirstDayOfWeek ? 0 : 1;
|
||||
var firstDay = _time2.default.getFirstWeekDay(this.props.viewDate) - e;
|
||||
return {
|
||||
marginLeft: (firstDay >= 0 ? firstDay : 6) * 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.handleClick },
|
||||
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,
|
||||
sundayFirstDayOfWeek: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
active: _react.PropTypes.string,
|
||||
day: _react.PropTypes.string,
|
||||
disabled: _react.PropTypes.string
|
||||
}),
|
||||
viewDate: _react.PropTypes.object
|
||||
};
|
||||
exports.default = Day;
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
'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 _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 Month = function (_Component) {
|
||||
_inherits(Month, _Component);
|
||||
|
||||
function Month() {
|
||||
var _ref;
|
||||
|
||||
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, (_ref = Month.__proto__ || Object.getPrototypeOf(Month)).call.apply(_ref, [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() {
|
||||
var _this2 = this;
|
||||
|
||||
var days = _utils2.default.range(0, 7).map(function (d) {
|
||||
return _time2.default.getDayOfWeekLetter(d, _this2.props.locale);
|
||||
});
|
||||
var source = this.props.sundayFirstDayOfWeek ? days : [].concat(_toConsumableArray(days.slice(1)), [days[0]]);
|
||||
return source.map(function (d, i) {
|
||||
return _react2.default.createElement(
|
||||
'span',
|
||||
{ key: i },
|
||||
d
|
||||
);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'renderDays',
|
||||
value: function renderDays() {
|
||||
var _this3 = this;
|
||||
|
||||
return _utils2.default.range(1, _time2.default.getDaysInMonth(this.props.viewDate) + 1).map(function (i) {
|
||||
var date = new Date(_this3.props.viewDate.getFullYear(), _this3.props.viewDate.getMonth(), i);
|
||||
var disabled = _time2.default.dateOutOfRange(date, _this3.props.minDate, _this3.props.maxDate);
|
||||
|
||||
return _react2.default.createElement(_CalendarDay2.default, {
|
||||
key: i,
|
||||
day: i,
|
||||
disabled: disabled,
|
||||
onClick: _this3.handleDayClick,
|
||||
selectedDate: _this3.props.selectedDate,
|
||||
theme: _this3.props.theme,
|
||||
viewDate: _this3.props.viewDate,
|
||||
sundayFirstDayOfWeek: _this3.props.sundayFirstDayOfWeek
|
||||
});
|
||||
});
|
||||
}
|
||||
}, {
|
||||
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.locale),
|
||||
' ',
|
||||
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 = {
|
||||
locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
|
||||
maxDate: _react.PropTypes.object,
|
||||
minDate: _react.PropTypes.object,
|
||||
onDayClick: _react.PropTypes.func,
|
||||
selectedDate: _react.PropTypes.object,
|
||||
sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
days: _react.PropTypes.string,
|
||||
month: _react.PropTypes.string,
|
||||
title: _react.PropTypes.string,
|
||||
week: _react.PropTypes.string
|
||||
}),
|
||||
viewDate: _react.PropTypes.object
|
||||
};
|
||||
exports.default = Month;
|
||||
|
|
@ -1,227 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.DatePicker = exports.datePickerFactory = exports.DatePickerDialog = 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 _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 _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(Input, DatePickerDialog) {
|
||||
var DatePicker = function (_Component) {
|
||||
_inherits(DatePicker, _Component);
|
||||
|
||||
function DatePicker() {
|
||||
var _ref;
|
||||
|
||||
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, (_ref = DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
active: _this.props.active
|
||||
}, _this.handleDismiss = function () {
|
||||
_this.setState({ active: false });
|
||||
if (_this.props.onDismiss) {
|
||||
_this.props.onDismiss();
|
||||
}
|
||||
}, _this.handleInputFocus = function (event) {
|
||||
_events2.default.pauseEvent(event);
|
||||
_this.setState({ active: true });
|
||||
}, _this.handleInputBlur = function (event) {
|
||||
_events2.default.pauseEvent(event);
|
||||
_this.setState({ active: false });
|
||||
}, _this.handleInputClick = function (event) {
|
||||
_events2.default.pauseEvent(event);
|
||||
_this.setState({ active: true });
|
||||
if (_this.props.onClick) _this.props.onClick(event);
|
||||
}, _this.handleInputKeyPress = function (event) {
|
||||
if (event.charCode === 13) {
|
||||
_events2.default.pauseEvent(event);
|
||||
_this.setState({ active: true });
|
||||
}
|
||||
if (_this.props.onKeyPress) _this.props.onKeyPress(event);
|
||||
}, _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: 'componentWillReceiveProps',
|
||||
value: function componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.active !== this.props.active && this.state.active !== nextProps.active) {
|
||||
this.setState({ active: nextProps.active });
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _props = this.props,
|
||||
active = _props.active,
|
||||
onDismiss = _props.onDismiss,
|
||||
autoOk = _props.autoOk,
|
||||
cancelLabel = _props.cancelLabel,
|
||||
inputClassName = _props.inputClassName,
|
||||
inputFormat = _props.inputFormat,
|
||||
locale = _props.locale,
|
||||
maxDate = _props.maxDate,
|
||||
minDate = _props.minDate,
|
||||
okLabel = _props.okLabel,
|
||||
onEscKeyDown = _props.onEscKeyDown,
|
||||
onOverlayClick = _props.onOverlayClick,
|
||||
readonly = _props.readonly,
|
||||
sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek,
|
||||
value = _props.value,
|
||||
others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'autoOk', 'cancelLabel', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
|
||||
|
||||
var finalInputFormat = inputFormat || _time2.default.formatDate;
|
||||
var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
|
||||
var formattedDate = date === undefined ? '' : finalInputFormat(value, locale);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'date-picker' },
|
||||
_react2.default.createElement(Input, _extends({}, others, {
|
||||
className: (0, _classnames3.default)(this.props.theme.input, _defineProperty({}, inputClassName, inputClassName)),
|
||||
disabled: readonly,
|
||||
error: this.props.error,
|
||||
icon: this.props.icon,
|
||||
label: this.props.label,
|
||||
name: this.props.name,
|
||||
onFocus: this.handleInputFocus,
|
||||
onKeyPress: this.handleInputKeyPress,
|
||||
onClick: this.handleInputClick,
|
||||
readOnly: true,
|
||||
type: 'text',
|
||||
value: formattedDate
|
||||
})),
|
||||
_react2.default.createElement(DatePickerDialog, {
|
||||
active: this.state.active,
|
||||
autoOk: autoOk,
|
||||
cancelLabel: cancelLabel,
|
||||
className: this.props.className,
|
||||
locale: locale,
|
||||
maxDate: maxDate,
|
||||
minDate: minDate,
|
||||
name: this.props.name,
|
||||
onDismiss: this.handleDismiss,
|
||||
okLabel: okLabel,
|
||||
onEscKeyDown: onEscKeyDown || this.handleDismiss,
|
||||
onOverlayClick: onOverlayClick || this.handleDismiss,
|
||||
onSelect: this.handleSelect,
|
||||
sundayFirstDayOfWeek: sundayFirstDayOfWeek,
|
||||
theme: this.props.theme,
|
||||
value: date
|
||||
})
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return DatePicker;
|
||||
}(_react.Component);
|
||||
|
||||
DatePicker.propTypes = {
|
||||
active: _react.PropTypes.bool,
|
||||
autoOk: _react.PropTypes.bool,
|
||||
cancelLabel: _react.PropTypes.string,
|
||||
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,
|
||||
locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
|
||||
maxDate: _react.PropTypes.object,
|
||||
minDate: _react.PropTypes.object,
|
||||
name: _react.PropTypes.string,
|
||||
okLabel: _react.PropTypes.string,
|
||||
onChange: _react.PropTypes.func,
|
||||
onClick: _react.PropTypes.func,
|
||||
onDismiss: _react.PropTypes.func,
|
||||
onEscKeyDown: _react.PropTypes.func,
|
||||
onKeyPress: _react.PropTypes.func,
|
||||
onOverlayClick: _react.PropTypes.func,
|
||||
readonly: _react.PropTypes.bool,
|
||||
sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
input: _react.PropTypes.string
|
||||
}),
|
||||
value: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(Date), _react.PropTypes.string])
|
||||
};
|
||||
DatePicker.defaultProps = {
|
||||
active: false,
|
||||
locale: 'en',
|
||||
sundayFirstDayOfWeek: false
|
||||
};
|
||||
|
||||
|
||||
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.DatePickerDialog = DatePickerDialog;
|
||||
exports.datePickerFactory = factory;
|
||||
exports.DatePicker = DatePicker;
|
||||
|
|
@ -1,181 +0,0 @@
|
|||
'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 _ref;
|
||||
|
||||
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, (_ref = CalendarDialog.__proto__ || Object.getPrototypeOf(CalendarDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
display: 'months',
|
||||
date: _this.props.value
|
||||
}, _this.handleNewDate = function (value, dayClick) {
|
||||
var state = { display: 'months', date: value };
|
||||
if (_time2.default.dateOutOfRange(value, _this.props.minDate, _this.props.maxDate)) {
|
||||
if (_this.props.maxDate && _this.props.minDate) {
|
||||
state.date = _time2.default.closestDate(value, _this.props.maxDate, _this.props.minDate);
|
||||
} else {
|
||||
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 (event) {
|
||||
_this.setState({ display: event.target.id });
|
||||
}, _this.updateStateDate = function (date) {
|
||||
if (Object.prototype.toString.call(date) === '[object Date]') {
|
||||
_this.handleNewDate(date, false);
|
||||
}
|
||||
}, _this.actions = [{ label: _this.props.cancelLabel, className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: _this.props.okLabel, className: _this.props.theme.button, name: _this.props.name, 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]);
|
||||
var shortDayOfWeek = _time2.default.getShortDayOfWeek(this.state.date.getDay(), this.props.locale);
|
||||
var shortMonth = _time2.default.getShortMonth(this.state.date, this.props.locale);
|
||||
var date = this.state.date.getDate();
|
||||
|
||||
return _react2.default.createElement(
|
||||
Dialog,
|
||||
{
|
||||
actions: this.actions,
|
||||
active: this.props.active,
|
||||
className: className,
|
||||
onEscKeyDown: this.props.onEscKeyDown,
|
||||
onOverlayClick: this.props.onOverlayClick,
|
||||
type: 'custom'
|
||||
},
|
||||
_react2.default.createElement(
|
||||
'header',
|
||||
{ className: headerClassName },
|
||||
_react2.default.createElement(
|
||||
'span',
|
||||
{ id: 'years', className: theme.year, onClick: this.handleSwitchDisplay },
|
||||
this.state.date.getFullYear()
|
||||
),
|
||||
_react2.default.createElement(
|
||||
'h3',
|
||||
{ id: 'months', className: theme.date, onClick: this.handleSwitchDisplay },
|
||||
shortDayOfWeek,
|
||||
', ',
|
||||
shortMonth,
|
||||
' ',
|
||||
date
|
||||
)
|
||||
),
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: theme.calendarWrapper },
|
||||
_react2.default.createElement(Calendar, {
|
||||
display: this.state.display,
|
||||
handleSelect: this.handleSelect,
|
||||
maxDate: this.props.maxDate,
|
||||
minDate: this.props.minDate,
|
||||
onChange: this.handleNewDate,
|
||||
selectedDate: this.state.date,
|
||||
theme: this.props.theme,
|
||||
locale: this.props.locale,
|
||||
sundayFirstDayOfWeek: this.props.sundayFirstDayOfWeek })
|
||||
)
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return CalendarDialog;
|
||||
}(_react.Component);
|
||||
|
||||
CalendarDialog.propTypes = {
|
||||
active: _react.PropTypes.bool,
|
||||
autoOk: _react.PropTypes.bool,
|
||||
cancelLabel: _react.PropTypes.string,
|
||||
className: _react.PropTypes.string,
|
||||
locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
|
||||
maxDate: _react.PropTypes.object,
|
||||
minDate: _react.PropTypes.object,
|
||||
name: _react.PropTypes.string,
|
||||
okLabel: _react.PropTypes.string,
|
||||
onDismiss: _react.PropTypes.func,
|
||||
onEscKeyDown: _react.PropTypes.func,
|
||||
onOverlayClick: _react.PropTypes.func,
|
||||
onSelect: _react.PropTypes.func,
|
||||
sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
button: _react.PropTypes.string,
|
||||
calendarWrapper: _react.PropTypes.string,
|
||||
date: _react.PropTypes.string,
|
||||
dialog: _react.PropTypes.string,
|
||||
header: _react.PropTypes.string,
|
||||
monthsDisplay: _react.PropTypes.string,
|
||||
year: _react.PropTypes.string,
|
||||
yearsDisplay: _react.PropTypes.string
|
||||
}),
|
||||
value: _react.PropTypes.object
|
||||
};
|
||||
CalendarDialog.defaultProps = {
|
||||
active: false,
|
||||
cancelLabel: 'Cancel',
|
||||
className: '',
|
||||
okLabel: 'Ok',
|
||||
value: new Date()
|
||||
};
|
||||
|
||||
|
||||
return CalendarDialog;
|
||||
};
|
||||
|
||||
exports.default = factory;
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
var _expect = require('expect');
|
||||
|
||||
var _expect2 = _interopRequireDefault(_expect);
|
||||
|
||||
var _theme = require('../theme.scss');
|
||||
|
||||
var _theme2 = _interopRequireDefault(_theme);
|
||||
|
||||
var _DatePicker = require('../DatePicker');
|
||||
|
||||
var _testing = require('../../utils/testing');
|
||||
|
||||
var _testing2 = _interopRequireDefault(_testing);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
describe('DatePickerDialog', function () {
|
||||
describe('#on mount', function () {
|
||||
it('passes value through to calendar if no maxDate/minDate specified', function () {
|
||||
var value = new Date(2016, 1, 1);
|
||||
var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value });
|
||||
(0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
|
||||
});
|
||||
|
||||
describe('when minDate but not maxDate specified', function () {
|
||||
var minDate = new Date(2016, 1, 2);
|
||||
|
||||
it('passes through a value after minDate', function () {
|
||||
var value = new Date(2016, 1, 3);
|
||||
var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value, minDate: minDate });
|
||||
(0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
|
||||
});
|
||||
|
||||
it('sanitises a value before minDate to minDate', function () {
|
||||
var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
|
||||
theme: _theme2.default, value: new Date(2016, 1, 1), minDate: minDate
|
||||
});
|
||||
(0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(minDate);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when maxDate but not minDate specified', function () {
|
||||
var maxDate = new Date(2016, 1, 2);
|
||||
|
||||
it('passes through a value before maxDate', function () {
|
||||
var value = new Date(2016, 1, 1);
|
||||
var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value, maxDate: maxDate });
|
||||
(0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
|
||||
});
|
||||
|
||||
it('sanitises a value after maxDate to maxDate', function () {
|
||||
var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
|
||||
theme: _theme2.default, value: new Date(2016, 1, 3), maxDate: maxDate
|
||||
});
|
||||
(0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(maxDate);
|
||||
});
|
||||
});
|
||||
|
||||
describe('if both minDate and maxDate are set', function () {
|
||||
var minDate = new Date(2016, 1, 2);
|
||||
var maxDate = new Date(2016, 1, 4);
|
||||
|
||||
it('sanitises value to minDate if value is before minDate', function () {
|
||||
var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
|
||||
theme: _theme2.default,
|
||||
value: new Date(2016, 1, 1),
|
||||
minDate: minDate,
|
||||
maxDate: maxDate
|
||||
});
|
||||
(0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(minDate);
|
||||
});
|
||||
|
||||
it('sanitises value to maxDate if value is after maxDate', function () {
|
||||
var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, {
|
||||
theme: _theme2.default,
|
||||
value: new Date(2016, 1, 5),
|
||||
minDate: minDate,
|
||||
maxDate: maxDate
|
||||
});
|
||||
(0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(maxDate);
|
||||
});
|
||||
|
||||
it('doesn\'t sanitise when value is between maxDate/minDate', function () {
|
||||
var value = new Date(2016, 1, 3);
|
||||
var wrapper = _testing2.default.shallowRenderComponent(_DatePicker.DatePickerDialog, { theme: _theme2.default, value: value, minDate: minDate, maxDate: maxDate });
|
||||
(0, _expect2.default)(getDatePassedToCalendar(wrapper)).toBe(value);
|
||||
});
|
||||
});
|
||||
|
||||
function getDatePassedToCalendar(wrapper) {
|
||||
return wrapper.props.children[1].props.children.props.selectedDate;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
$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 * $unit !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-topbottom: .2 * $unit !default;
|
||||
$calendar-day-padding-leftright: 0 !default;
|
||||
$calendar-title-height: 3.6 * $unit !default;
|
||||
$calendar-total-height: $calendar-row-height * 7 + $calendar-title-height + $calendar-day-padding-topbottom * 12 !default;
|
||||
|
|
@ -1,153 +0,0 @@
|
|||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface DatePickerTheme {
|
||||
/**
|
||||
* Used for the active day and year.
|
||||
*/
|
||||
active?: string;
|
||||
/**
|
||||
* Used for the buttons in the dialog.
|
||||
*/
|
||||
button?: string;
|
||||
/**
|
||||
* Used for the calendar root element.
|
||||
*/
|
||||
calendar?: string;
|
||||
/**
|
||||
* Used as wrapper for the calendar component inside dialog.
|
||||
*/
|
||||
calendarWrapper?: string;
|
||||
/**
|
||||
* Used for the date element inside header.
|
||||
*/
|
||||
date?: string;
|
||||
/**
|
||||
* Used for the day element inside the calendar.
|
||||
*/
|
||||
day?: string;
|
||||
/**
|
||||
* Used for the list of days inside a month.
|
||||
*/
|
||||
days?: string;
|
||||
/**
|
||||
* Used for the dialog component.
|
||||
*/
|
||||
dialog?: string;
|
||||
/**
|
||||
* Added to day element when day is disabled.
|
||||
*/
|
||||
disabled?: string;
|
||||
/**
|
||||
* Used for the dialog header,.
|
||||
*/
|
||||
header?: string;
|
||||
/**
|
||||
* Used for Input element that opens the picker.
|
||||
*/
|
||||
input?: string;
|
||||
/**
|
||||
* Used for the month root element.
|
||||
*/
|
||||
month?: string;
|
||||
/**
|
||||
* Added to the root dialog when months are displayed.
|
||||
*/
|
||||
monthsDisplay?: string;
|
||||
/**
|
||||
* Used for the next month icon.
|
||||
*/
|
||||
next?: string;
|
||||
/**
|
||||
* Used for the prev month icon.
|
||||
*/
|
||||
prev?: string;
|
||||
/**
|
||||
* Used for the month title element.
|
||||
*/
|
||||
title?: string;
|
||||
/**
|
||||
* Used for the weekdays wrapper.
|
||||
*/
|
||||
week?: string;
|
||||
/**
|
||||
* Used for the year element inside header.
|
||||
*/
|
||||
year?: string;
|
||||
/**
|
||||
* Used for the years list in years view.
|
||||
*/
|
||||
years?: string;
|
||||
/**
|
||||
* Added to the root dialog when years are displayed.
|
||||
*/
|
||||
yearsDisplay?: string;
|
||||
}
|
||||
|
||||
interface DatePickerProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Automatically selects a date upon clicking on a day
|
||||
* @default false
|
||||
*/
|
||||
autoOk?: boolean;
|
||||
/**
|
||||
* Give an error node to display under the field.
|
||||
*/
|
||||
error?: string;
|
||||
/**
|
||||
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
|
||||
*/
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* This class will be applied to Input component of DatePicker.
|
||||
*/
|
||||
inputClassName?: string;
|
||||
/**
|
||||
* Function to format the date displayed on the input.
|
||||
*/
|
||||
inputFormat?: Function;
|
||||
/**
|
||||
* The text string to use for the floating label element in the input component.
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* Date object with the maximum selectable date.
|
||||
*/
|
||||
maxDate?: Date;
|
||||
/**
|
||||
* Date object with the minimum selectable date.
|
||||
*/
|
||||
minDate?: Date;
|
||||
/**
|
||||
* Name for the input field.
|
||||
*/
|
||||
name?: string;
|
||||
/**
|
||||
* Callback called when the picker value is changed.
|
||||
*/
|
||||
onChange?: Function;
|
||||
/**
|
||||
* Callback called when the ESC key is pressed with the overlay active.
|
||||
*/
|
||||
onEscKeyDown?: Function;
|
||||
/**
|
||||
* Callback to be invoked when the dialog overlay is clicked.
|
||||
*/
|
||||
onOverlayClick?: Function;
|
||||
/**
|
||||
* The input element will be readonly and look like disabled.
|
||||
*/
|
||||
readonly?: boolean;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: DatePickerTheme;
|
||||
/**
|
||||
* Date object with the currently selected date.
|
||||
*/
|
||||
value?: Date | string;
|
||||
}
|
||||
|
||||
export class DatePicker extends React.Component<DatePickerProps, {}> { }
|
||||
|
||||
export default DatePicker;
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.DatePickerDialog = exports.DatePicker = undefined;
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _DatePicker = 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 }; }
|
||||
|
||||
var Calendar = (0, _Calendar2.default)(_button.IconButton);
|
||||
var DatePickerDialog = (0, _DatePickerDialog2.default)(_dialog2.default, Calendar);
|
||||
var DatePicker = (0, _DatePicker.datePickerFactory)(_input2.default, DatePickerDialog);
|
||||
|
||||
var ThemedDatePicker = (0, _reactCssThemr.themr)(_identifiers.DATE_PICKER, _theme2.default)(DatePicker);
|
||||
exports.default = ThemedDatePicker;
|
||||
exports.DatePicker = ThemedDatePicker;
|
||||
|
||||
|
||||
var ThemedDatePickerDialog = (0, _reactCssThemr.themr)(_identifiers.DIALOG, _theme2.default)(DatePickerDialog);
|
||||
exports.DatePickerDialog = ThemedDatePickerDialog;
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
|
||||
.input:not(.disabled) > .inputElement {
|
||||
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;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
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-topbottom $calendar-day-padding-leftright;
|
||||
> 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;
|
||||
}
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
'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,
|
||||
onEscKeyDown: props.onEscKeyDown,
|
||||
onMouseDown: props.onOverlayMouseDown,
|
||||
onMouseMove: props.onOverlayMouseMove,
|
||||
onMouseUp: props.onOverlayMouseUp
|
||||
},
|
||||
_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,
|
||||
body: _react.PropTypes.string,
|
||||
button: _react.PropTypes.string,
|
||||
dialog: _react.PropTypes.string,
|
||||
navigation: _react.PropTypes.string,
|
||||
title: _react.PropTypes.string
|
||||
}),
|
||||
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;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
$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;
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface DialogTheme {
|
||||
/**
|
||||
* Used for the root when the dialog is active.
|
||||
*/
|
||||
active?: string;
|
||||
/**
|
||||
* Used to wrap the dialog body.
|
||||
*/
|
||||
body?: string;
|
||||
/**
|
||||
* Used in buttons when the dialog implements actions.
|
||||
*/
|
||||
button?: string;
|
||||
/**
|
||||
* Used for the root element.
|
||||
*/
|
||||
dialog?: string;
|
||||
/**
|
||||
* Used for the navigation element when it implements actions.
|
||||
*/
|
||||
navigation?: string;
|
||||
/**
|
||||
* Used for the title element of the dialog.
|
||||
*/
|
||||
title?: string;
|
||||
}
|
||||
|
||||
interface DialogActionProps {
|
||||
/**
|
||||
* The text string to use for the name of the button.
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* Callback called when the component is clicked.
|
||||
*/
|
||||
onClick?: Function;
|
||||
}
|
||||
|
||||
interface DialogProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
|
||||
*/
|
||||
actions?: DialogActionProps[];
|
||||
/**
|
||||
* If true, the dialog will be active.
|
||||
* @default false
|
||||
*/
|
||||
active?: boolean;
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Callback called when the ESC key is pressed with the overlay active.
|
||||
*/
|
||||
onEscKeyDown?: Function;
|
||||
/**
|
||||
* Callback to be invoked when the dialog overlay is clicked.
|
||||
*/
|
||||
onOverlayClick?: Function;
|
||||
/**
|
||||
* Callback called when the mouse button is pressed on the overlay.
|
||||
*/
|
||||
onOverlayMouseDown?: Function;
|
||||
/**
|
||||
* Callback called when the mouse is moving over the overlay.
|
||||
*/
|
||||
onOverlayMouseMove?: Function;
|
||||
/**
|
||||
* Callback called when the mouse button is released over the overlay.
|
||||
*/
|
||||
onOverlayMouseUp?: Function;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: DialogTheme;
|
||||
/**
|
||||
* The text string to use as standar title of the dialog.
|
||||
*/
|
||||
title?: string;
|
||||
/**
|
||||
* Used to determine the size of the dialog. It can be small, normal or large.
|
||||
* @default normal
|
||||
*/
|
||||
type?: string;
|
||||
}
|
||||
|
||||
export class Dialog extends React.Component<DialogProps, {}> { }
|
||||
|
||||
export default Dialog;
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
'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;
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@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;
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
width: 96vw;
|
||||
|
||||
@media screen and (max-width: $layout-breakpoint-xs) {
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
min-height: 100vh;
|
||||
max-height: 100vh;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@include typo-title();
|
||||
flex-grow: 0;
|
||||
margin-bottom: 1.6 * $unit;
|
||||
color: $dialog-color-title;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex-grow: 2;
|
||||
padding: $dialog-content-padding;
|
||||
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;
|
||||
}
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
'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,
|
||||
children = _ref.children,
|
||||
className = _ref.className,
|
||||
onOverlayClick = _ref.onOverlayClick,
|
||||
theme = _ref.theme,
|
||||
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,
|
||||
content: _react.PropTypes.string,
|
||||
drawer: _react.PropTypes.string,
|
||||
left: _react.PropTypes.string,
|
||||
right: _react.PropTypes.string
|
||||
}),
|
||||
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;
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
$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;
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface DrawerTheme {
|
||||
/**
|
||||
* Used for the root class when the drawer is active.
|
||||
*/
|
||||
active?: string;
|
||||
/**
|
||||
* Used for the drawer content.
|
||||
*/
|
||||
content?: string;
|
||||
/**
|
||||
* Root class.
|
||||
*/
|
||||
drawer?: string;
|
||||
/**
|
||||
* Added to the root class when drawer is to the left.
|
||||
*/
|
||||
left?: string;
|
||||
/**
|
||||
* Added to the root class when drawer is to the right.
|
||||
*/
|
||||
right?: string;
|
||||
}
|
||||
|
||||
interface DrawerProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true, the drawer will be visible.
|
||||
* @default false
|
||||
*/
|
||||
active?: boolean;
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Callback function to be invoked when the overlay is clicked.
|
||||
*/
|
||||
onOverlayClick?: Function;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: DrawerTheme;
|
||||
/**
|
||||
* Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.
|
||||
* @default left
|
||||
*/
|
||||
type?: "left" | "right";
|
||||
}
|
||||
|
||||
export class Drawer extends React.Component<DrawerProps, {}> { }
|
||||
|
||||
export default Drawer;
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
'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;
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,304 +0,0 @@
|
|||
'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 _ref;
|
||||
|
||||
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, (_ref = Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
active: false,
|
||||
up: false
|
||||
}, _this.getDocumentEvents = function () {
|
||||
return {
|
||||
click: _this.handleDocumentClick,
|
||||
touchend: _this.handleDocumentClick
|
||||
};
|
||||
}, _this.open = function () {
|
||||
var client = event.target.getBoundingClientRect();
|
||||
var screenHeight = window.innerHeight || document.documentElement.offsetHeight;
|
||||
var up = _this.props.auto ? client.top > screenHeight / 2 + client.height : false;
|
||||
if (_this.inputNode) _this.inputNode.blur();
|
||||
_this.setState({ active: true, up: up });
|
||||
}, _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.handleClick = function (event) {
|
||||
_this.open();
|
||||
_events2.default.pauseEvent(event);
|
||||
if (_this.props.onClick) _this.props.onClick(event);
|
||||
}, _this.handleSelect = function (item, event) {
|
||||
if (_this.props.onBlur) _this.props.onBlur(event);
|
||||
if (!_this.props.disabled && _this.props.onChange) {
|
||||
if (_this.props.name) {
|
||||
event.target.name = _this.props.name;
|
||||
}
|
||||
_this.props.onChange(item, event);
|
||||
_this.close();
|
||||
}
|
||||
}, _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];
|
||||
}
|
||||
}, _this.renderValue = function (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, onClick: _this.handleSelect.bind(_this, item.value) },
|
||||
_this.props.template ? _this.props.template(item) : item.label
|
||||
);
|
||||
}, _this.handleFocus = function (event) {
|
||||
event.stopPropagation();
|
||||
if (!_this.props.disabled) _this.open();
|
||||
if (_this.props.onFocus) _this.props.onFocus(event);
|
||||
}, _this.handleBlur = function (event) {
|
||||
event.stopPropagation();
|
||||
if (_this.state.active) _this.close();
|
||||
if (_this.props.onBlur) _this.props.onBlur(event);
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(Dropdown, [{
|
||||
key: 'componentWillUpdate',
|
||||
value: function componentWillUpdate(nextProps, nextState) {
|
||||
if (!this.state.active && nextState.active) {
|
||||
_events2.default.addEventsToDocument(this.getDocumentEvents());
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentDidUpdate',
|
||||
value: function componentDidUpdate(prevProps, prevState) {
|
||||
if (prevState.active && !this.state.active) {
|
||||
_events2.default.removeEventsFromDocument(this.getDocumentEvents());
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillUnmount',
|
||||
value: function componentWillUnmount() {
|
||||
if (this.state.active) {
|
||||
_events2.default.removeEventsFromDocument(this.getDocumentEvents());
|
||||
}
|
||||
}
|
||||
}, {
|
||||
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), _defineProperty(_classnames, theme.required, this.props.required), _classnames));
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ className: className, onClick: this.handleClick },
|
||||
_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,
|
||||
this.props.required ? _react2.default.createElement(
|
||||
'span',
|
||||
{ className: theme.required },
|
||||
' * '
|
||||
) : null
|
||||
) : null,
|
||||
this.props.error ? _react2.default.createElement(
|
||||
'span',
|
||||
{ className: theme.error },
|
||||
this.props.error
|
||||
) : null
|
||||
);
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _classnames2,
|
||||
_this2 = this;
|
||||
|
||||
var _props = this.props,
|
||||
allowBlank = _props.allowBlank,
|
||||
auto = _props.auto,
|
||||
required = _props.required,
|
||||
onChange = _props.onChange,
|
||||
onFocus = _props.onFocus,
|
||||
onBlur = _props.onBlur,
|
||||
source = _props.source,
|
||||
template = _props.template,
|
||||
theme = _props.theme,
|
||||
others = _objectWithoutProperties(_props, ['allowBlank', 'auto', 'required', 'onChange', 'onFocus', 'onBlur', 'source', 'template', 'theme']);
|
||||
|
||||
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), _defineProperty(_classnames2, theme.required, this.props.required), _classnames2), this.props.className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{
|
||||
className: className,
|
||||
'data-react-toolbox': 'dropdown',
|
||||
onBlur: this.handleBlur,
|
||||
onFocus: this.handleFocus,
|
||||
tabIndex: '0'
|
||||
},
|
||||
_react2.default.createElement(Input, _extends({}, others, {
|
||||
tabIndex: '-1',
|
||||
className: theme.value,
|
||||
onClick: this.handleClick,
|
||||
required: this.props.required,
|
||||
readOnly: true,
|
||||
ref: function ref(node) {
|
||||
_this2.inputNode = node && node.getWrappedInstance();
|
||||
},
|
||||
type: template && selected ? 'hidden' : null,
|
||||
value: selected && selected.label ? selected.label : ''
|
||||
})),
|
||||
template && selected ? this.renderTemplateValue(selected) : null,
|
||||
_react2.default.createElement(
|
||||
'ul',
|
||||
{ className: theme.values, ref: 'values' },
|
||||
source.map(this.renderValue)
|
||||
)
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
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,
|
||||
name: _react.PropTypes.string,
|
||||
onBlur: _react.PropTypes.func,
|
||||
onChange: _react.PropTypes.func,
|
||||
onClick: _react.PropTypes.func,
|
||||
onFocus: _react.PropTypes.func,
|
||||
required: _react.PropTypes.bool,
|
||||
source: _react.PropTypes.array.isRequired,
|
||||
template: _react.PropTypes.func,
|
||||
theme: _react.PropTypes.shape({
|
||||
active: _react.PropTypes.string,
|
||||
disabled: _react.PropTypes.string,
|
||||
dropdown: _react.PropTypes.string,
|
||||
error: _react.PropTypes.string,
|
||||
errored: _react.PropTypes.string,
|
||||
field: _react.PropTypes.string,
|
||||
label: _react.PropTypes.string,
|
||||
required: _react.PropTypes.string,
|
||||
selected: _react.PropTypes.string,
|
||||
templateValue: _react.PropTypes.string,
|
||||
up: _react.PropTypes.string,
|
||||
value: _react.PropTypes.string,
|
||||
values: _react.PropTypes.string
|
||||
}),
|
||||
value: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number])
|
||||
};
|
||||
Dropdown.defaultProps = {
|
||||
auto: true,
|
||||
className: '',
|
||||
allowBlank: true,
|
||||
disabled: false,
|
||||
required: false
|
||||
};
|
||||
|
||||
|
||||
return Dropdown;
|
||||
};
|
||||
|
||||
var Dropdown = factory(_Input2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.DROPDOWN)(Dropdown);
|
||||
exports.dropdownFactory = factory;
|
||||
exports.Dropdown = Dropdown;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
$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;
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface DropdownTheme {
|
||||
/**
|
||||
* Added to the root element when the dropdown is active.
|
||||
*/
|
||||
active?: string;
|
||||
/**
|
||||
* Added to the root element when it's disabled.
|
||||
*/
|
||||
disabled?: string;
|
||||
/**
|
||||
* Root element class.
|
||||
*/
|
||||
dropdown?: string;
|
||||
/**
|
||||
* Used for the error element.
|
||||
*/
|
||||
error?: string;
|
||||
/**
|
||||
* Added to the inner wrapper if it's errored.
|
||||
*/
|
||||
errored?: string;
|
||||
/**
|
||||
* Used for the inner wrapper of the component.
|
||||
*/
|
||||
field?: string;
|
||||
/**
|
||||
* Used for the the label element.
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* Used to highlight the selected value.
|
||||
*/
|
||||
selected?: string;
|
||||
/**
|
||||
* Used as a wrapper for the given template value.
|
||||
*/
|
||||
templateValue?: string;
|
||||
/**
|
||||
* Added to the root element when it's opening up.
|
||||
*/
|
||||
up?: string;
|
||||
/**
|
||||
* Used for each value in the dropdown component.
|
||||
*/
|
||||
value?: string;
|
||||
/**
|
||||
* Used for the list of values.
|
||||
*/
|
||||
values?: string;
|
||||
}
|
||||
|
||||
interface DropdownProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* If true the dropdown will preselect the first item if the supplied value matches none of the options' values.
|
||||
* @default true
|
||||
*/
|
||||
allowBlank?: boolean;
|
||||
/**
|
||||
* If true, the dropdown will open up or down depending on the position in the screen.
|
||||
* @default true
|
||||
*/
|
||||
auto?: boolean;
|
||||
/**
|
||||
* Set the component as disabled.
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* Give an error string to display under the field.
|
||||
*/
|
||||
error?: string;
|
||||
/**
|
||||
* The text string to use for the floating label element.
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* Name for the input field.
|
||||
*/
|
||||
name?: string;
|
||||
/**
|
||||
* Callback function that is fired when the component is blurred.
|
||||
*/
|
||||
onBlur?: Function;
|
||||
/**
|
||||
* Callback function that is fired when the component's value changes.
|
||||
*/
|
||||
onChange?: Function;
|
||||
/**
|
||||
* Callback function that is fired when the component is focused.
|
||||
*/
|
||||
onFocus?: Function;
|
||||
/**
|
||||
* Array of data objects with the data to represent in the dropdown.
|
||||
*/
|
||||
source: any[];
|
||||
/**
|
||||
* Callback function that returns a JSX template to represent the element.
|
||||
*/
|
||||
template?: Function;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: DropdownTheme;
|
||||
/**
|
||||
* Default value using JSON data.
|
||||
*/
|
||||
value?: string | number;
|
||||
}
|
||||
|
||||
export class Dropdown extends React.Component<DropdownProps, {}> { }
|
||||
|
||||
export default Dropdown;
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
'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;
|
||||
|
|
@ -1,138 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@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;
|
||||
}
|
||||
> .label > .required {
|
||||
color: $input-text-required-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;
|
||||
.required {
|
||||
color: $input-text-required-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
'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,
|
||||
className = _ref.className,
|
||||
value = _ref.value,
|
||||
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' || typeof children === '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;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
interface FontIconProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* The key string for the icon you want be displayed.
|
||||
*/
|
||||
value?: React.ReactNode | string;
|
||||
}
|
||||
|
||||
export class FontIcon extends React.Component<FontIconProps, {}> { }
|
||||
|
||||
export default FontIcon;
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
'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;
|
||||
151
lib/form/Form.js
151
lib/form/Form.js
|
|
@ -1,151 +0,0 @@
|
|||
'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 _ref;
|
||||
|
||||
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, (_ref = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref, [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;
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
'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;
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
'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 ? arguments[0] : { delay: 500 };
|
||||
return function (ActivableComponent) {
|
||||
var _class, _temp2;
|
||||
|
||||
return _temp2 = _class = function (_Component) {
|
||||
_inherits(ActivableRenderer, _Component);
|
||||
|
||||
function ActivableRenderer() {
|
||||
var _ref;
|
||||
|
||||
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, (_ref = ActivableRenderer.__proto__ || Object.getPrototypeOf(ActivableRenderer)).call.apply(_ref, [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: 'componentWillUnmount',
|
||||
value: function componentWillUnmount() {
|
||||
clearTimeout(this.activateTimeout);
|
||||
clearTimeout(this.unrenderTimeout);
|
||||
}
|
||||
}, {
|
||||
key: 'renderAndActivate',
|
||||
value: function renderAndActivate() {
|
||||
var _this2 = this;
|
||||
|
||||
if (this.unrenderTimeout) clearTimeout(this.unrenderTimeout);
|
||||
this.setState({ rendered: true, active: false }, function () {
|
||||
_this2.activateTimeout = 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,
|
||||
delay = _props.delay,
|
||||
others = _objectWithoutProperties(_props, ['delay']); // eslint-disable-line no-unused-vars
|
||||
|
||||
|
||||
var _state = this.state,
|
||||
active = _state.active,
|
||||
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;
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
'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, (Portal.__proto__ || 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;
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
'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 CHECKBOX = exports.CHECKBOX = 'RTCheckbox';
|
||||
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 MENU = exports.MENU = 'RTMenu';
|
||||
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 TIME_PICKER = exports.TIME_PICKER = 'RTTimePicker';
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
import * as React from "react";
|
||||
export declare namespace ReactToolbox {
|
||||
interface Props {
|
||||
/**
|
||||
* Set a class for the root component.
|
||||
*/
|
||||
className?: string;
|
||||
/**
|
||||
* Key used to uniquely identify the element within an Array.
|
||||
*/
|
||||
key?: string | number;
|
||||
/**
|
||||
* Callback called when the component is clicked.
|
||||
*/
|
||||
onClick?: Function;
|
||||
/**
|
||||
* Fires after the mouse is released from the Component.
|
||||
*/
|
||||
onMouseUp?: Function;
|
||||
/**
|
||||
* Callback called when the mouse enters the Component.
|
||||
*/
|
||||
onMouseEnter?: Function;
|
||||
/**
|
||||
* Callback called when the mouse leaves the Component.
|
||||
*/
|
||||
onMouseLeave?: Function;
|
||||
/**
|
||||
* Callback called when the mouse press the Component.
|
||||
*/
|
||||
onMouseDown?: Function;
|
||||
onContextMenu?: Function;
|
||||
onDoubleClick?: Function;
|
||||
onDrag?: Function;
|
||||
onDragEnd?: Function;
|
||||
onDragEnter?: Function;
|
||||
onDragExit?: Function;
|
||||
onDragLeave?: Function;
|
||||
onDragOver?: Function;
|
||||
onDragStart?: Function;
|
||||
onDrop?: Function;
|
||||
onMouseMove?: Function;
|
||||
onMouseOut?: Function;
|
||||
onMouseOver?: Function;
|
||||
onTouchCancel?: Function;
|
||||
onTouchEnd?: Function;
|
||||
onTouchMove?: Function;
|
||||
onTouchStart?: Function;
|
||||
/**
|
||||
* Set inline style for the root component.
|
||||
*/
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
}
|
||||
|
||||
export default ReactToolbox;
|
||||
206
lib/index.js
206
lib/index.js
|
|
@ -1,206 +0,0 @@
|
|||
'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" || key === "__esModule") 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" || key === "__esModule") 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" || key === "__esModule") 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" || key === "__esModule") 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" || key === "__esModule") 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" || key === "__esModule") 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" || key === "__esModule") 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;
|
||||
|
|
@ -1,296 +0,0 @@
|
|||
'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 _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||
|
||||
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 _ref;
|
||||
|
||||
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, (_ref = Input.__proto__ || Object.getPrototypeOf(Input)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (event) {
|
||||
var _this$props = _this.props,
|
||||
onChange = _this$props.onChange,
|
||||
multiline = _this$props.multiline,
|
||||
maxLength = _this$props.maxLength;
|
||||
|
||||
var valueFromEvent = event.target.value;
|
||||
|
||||
// Trim value to maxLength if that exists (only on multiline inputs).
|
||||
// Note that this is still required even tho we have the onKeyPress filter
|
||||
// because the user could paste smt in the textarea.
|
||||
var haveToTrim = multiline && maxLength && event.target.value.length > maxLength;
|
||||
var value = haveToTrim ? valueFromEvent.substr(0, maxLength) : valueFromEvent;
|
||||
|
||||
// propagate to to store and therefore to the input
|
||||
if (onChange) onChange(value, event);
|
||||
}, _this.handleAutoresize = function () {
|
||||
var element = _this.refs.input;
|
||||
var rows = _this.props.rows;
|
||||
|
||||
if (typeof rows === 'number' && !isNaN(rows)) {
|
||||
element.style.height = null;
|
||||
} else {
|
||||
// compute the height difference between inner height and outer height
|
||||
var style = getComputedStyle(element, null);
|
||||
var heightOffset = style.boxSizing === 'content-box' ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)) : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
|
||||
|
||||
// resize the input to its content size
|
||||
element.style.height = 'auto';
|
||||
element.style.height = element.scrollHeight + heightOffset + 'px';
|
||||
}
|
||||
}, _this.handleKeyPress = function (event) {
|
||||
// prevent insertion of more characters if we're a multiline input
|
||||
// and maxLength exists
|
||||
var _this$props2 = _this.props,
|
||||
multiline = _this$props2.multiline,
|
||||
maxLength = _this$props2.maxLength,
|
||||
onKeyPress = _this$props2.onKeyPress;
|
||||
|
||||
if (multiline && maxLength) {
|
||||
// check if smt is selected, in which case the newly added charcter would
|
||||
// replace the selected characters, so the length of value doesn't actually
|
||||
// increase.
|
||||
var isReplacing = event.target.selectionEnd - event.target.selectionStart;
|
||||
var value = event.target.value;
|
||||
|
||||
if (!isReplacing && value.length === maxLength) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (onKeyPress) onKeyPress(event);
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(Input, [{
|
||||
key: 'componentDidMount',
|
||||
value: function componentDidMount() {
|
||||
if (this.props.multiline) {
|
||||
window.addEventListener('resize', this.handleAutoresize);
|
||||
this.handleAutoresize();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillReceiveProps',
|
||||
value: function componentWillReceiveProps(nextProps) {
|
||||
if (!this.props.multiline && nextProps.multiline) {
|
||||
window.addEventListener('resize', this.handleAutoresize);
|
||||
} else if (this.props.multiline && !nextProps.multiline) {
|
||||
window.removeEventListener('resize', this.handleAutoresize);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentDidUpdate',
|
||||
value: function componentDidUpdate() {
|
||||
// resize the textarea, if nessesary
|
||||
if (this.props.multiline) this.handleAutoresize();
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillUnmount',
|
||||
value: function componentWillUnmount() {
|
||||
if (this.props.multiline) window.removeEventListener('resize', this.handleAutoresize);
|
||||
}
|
||||
}, {
|
||||
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,
|
||||
children = _props.children,
|
||||
disabled = _props.disabled,
|
||||
error = _props.error,
|
||||
floating = _props.floating,
|
||||
hint = _props.hint,
|
||||
icon = _props.icon,
|
||||
name = _props.name,
|
||||
labelText = _props.label,
|
||||
maxLength = _props.maxLength,
|
||||
multiline = _props.multiline,
|
||||
required = _props.required,
|
||||
theme = _props.theme,
|
||||
type = _props.type,
|
||||
value = _props.value,
|
||||
onKeyPress = _props.onKeyPress,
|
||||
_props$rows = _props.rows,
|
||||
rows = _props$rows === undefined ? 1 : _props$rows,
|
||||
others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'name', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value', 'onKeyPress', 'rows']);
|
||||
|
||||
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 !== '' && !((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === Number && isNaN(value));
|
||||
|
||||
var inputElementProps = _extends({}, others, {
|
||||
className: (0, _classnames5.default)(theme.inputElement, _defineProperty({}, theme.filled, valuePresent)),
|
||||
onChange: this.handleChange,
|
||||
ref: 'input',
|
||||
role: 'input',
|
||||
name: name,
|
||||
disabled: disabled,
|
||||
required: required,
|
||||
type: type,
|
||||
value: value
|
||||
});
|
||||
if (!multiline) {
|
||||
inputElementProps.maxLength = maxLength;
|
||||
inputElementProps.onKeyPress = onKeyPress;
|
||||
} else {
|
||||
inputElementProps.rows = rows;
|
||||
inputElementProps.onKeyPress = this.handleKeyPress;
|
||||
}
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'input', className: className },
|
||||
_react2.default.createElement(multiline ? 'textarea' : 'input', inputElementProps),
|
||||
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',
|
||||
{ hidden: labelText, 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,
|
||||
name: _react2.default.PropTypes.string,
|
||||
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,
|
||||
rows: _react2.default.PropTypes.number,
|
||||
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, null, { withRef: true })(Input);
|
||||
exports.inputFactory = factory;
|
||||
exports.Input = Input;
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
$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;
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
import * as React from "react";
|
||||
import ReactToolbox from "../index";
|
||||
|
||||
export interface InputTheme {
|
||||
/**
|
||||
* Used for the bar under the input.
|
||||
*/
|
||||
bar?: string;
|
||||
/**
|
||||
* Used for the counter element.
|
||||
*/
|
||||
counter?: string;
|
||||
/**
|
||||
* Added to the root class when input is disabled.
|
||||
*/
|
||||
disabled?: string;
|
||||
/**
|
||||
* Used for the text error.
|
||||
*/
|
||||
error?: string;
|
||||
/**
|
||||
* Added to the root class when input is errored.
|
||||
*/
|
||||
errored?: string;
|
||||
/**
|
||||
* Used when the input is hidden.
|
||||
*/
|
||||
hidden?: string;
|
||||
/**
|
||||
* Used for the hint text.
|
||||
*/
|
||||
hint?: string;
|
||||
/**
|
||||
* Used for the icon in case the input has icon.
|
||||
*/
|
||||
icon?: string;
|
||||
/**
|
||||
* Used as root class for the component.
|
||||
*/
|
||||
input?: string;
|
||||
/**
|
||||
* Used for the HTML input element.
|
||||
*/
|
||||
inputElement?: string;
|
||||
/**
|
||||
* Used in case the input is required.
|
||||
*/
|
||||
required?: string;
|
||||
/**
|
||||
* Added to the root class if the input has icon.
|
||||
*/
|
||||
withIcon?: string;
|
||||
}
|
||||
|
||||
interface InputProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, component will be disabled.
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* Give an error node to display under the field.
|
||||
*/
|
||||
error?: string;
|
||||
/**
|
||||
* Indicates if the label is floating in the input field or not.
|
||||
* @default true
|
||||
*/
|
||||
floating?: boolean;
|
||||
/**
|
||||
* The text string to use for hint text element.
|
||||
*/
|
||||
hint?: string;
|
||||
/**
|
||||
* Name of an icon to use as a label for the input.
|
||||
*/
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* The text string to use for the floating label element.
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* Specifies the maximum number of characters allowed in the component
|
||||
*/
|
||||
maxLength?: number;
|
||||
/**
|
||||
* If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.
|
||||
* @default false
|
||||
*/
|
||||
multiline?: boolean;
|
||||
/**
|
||||
* Name for the input field.
|
||||
*/
|
||||
name?: string;
|
||||
/**
|
||||
* Callback function that is fired when component is blurred.
|
||||
*/
|
||||
onBlur?: Function;
|
||||
/**
|
||||
* Callback function that is fired when the component's value changes
|
||||
*/
|
||||
onChange?: Function;
|
||||
/**
|
||||
* Callback function that is fired when component is focused.
|
||||
*/
|
||||
onFocus?: Function;
|
||||
/**
|
||||
* Callback function that is fired when a key is pressed.
|
||||
*/
|
||||
onKeyPress?: Function;
|
||||
/**
|
||||
* If true, the html input has a required attribute.
|
||||
* @default false
|
||||
*/
|
||||
required?: boolean;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: InputTheme;
|
||||
/**
|
||||
* Type of the input element. It can be a valid HTML5 input type
|
||||
*/
|
||||
type?: string;
|
||||
/**
|
||||
* Current value of the input element.
|
||||
*/
|
||||
value?: any;
|
||||
}
|
||||
|
||||
export class Input extends React.Component<InputProps, {}> { }
|
||||
|
||||
export default Input;
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
'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, { withRef: true })(Input);
|
||||
|
||||
exports.default = ThemedInput;
|
||||
exports.Input = ThemedInput;
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
@import "../colors";
|
||||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@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:not([disabled]):not([readonly]) {
|
||||
~ .bar:before, ~ .bar:after {
|
||||
width: 50%;
|
||||
}
|
||||
~ .label:not(.fixed) {
|
||||
color: $input-text-highlight-color;
|
||||
}
|
||||
~ .label > .required {
|
||||
color: $input-text-required-color;
|
||||
}
|
||||
~ .hint {
|
||||
display: block;
|
||||
opacity: $input-hint-opacity;
|
||||
}
|
||||
~ .icon {
|
||||
color: $input-text-highlight-color;
|
||||
}
|
||||
}
|
||||
&:focus:not([disabled]):not([readonly]), &.filled, &[type="date"], &[type="time"] {
|
||||
~ .label:not(.fixed) {
|
||||
top: $input-focus-label-top;
|
||||
font-size: $input-label-font-size;
|
||||
}
|
||||
&.filled ~ .hint {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&.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: $input-hint-opacity;
|
||||
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;
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
'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,
|
||||
children = _ref.children,
|
||||
theme = _ref.theme;
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'layout', className: (0, _classnames2.default)(theme.layout, className) },
|
||||
_react2.default.Children.map(children, function (child) {
|
||||
return _react2.default.cloneElement(child, { theme: theme });
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
Layout.propTypes = {
|
||||
children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.element), _react.PropTypes.element]),
|
||||
className: _react.PropTypes.string,
|
||||
theme: _react.PropTypes.shape({
|
||||
layout: _react.PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
Layout.defaultProps = {
|
||||
className: ''
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Layout);
|
||||
exports.Layout = Layout;
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
'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,
|
||||
children = _ref.children,
|
||||
className = _ref.className,
|
||||
onOverlayClick = _ref.onOverlayClick,
|
||||
permanentAt = _ref.permanentAt,
|
||||
pinned = _ref.pinned,
|
||||
scrollY = _ref.scrollY,
|
||||
theme = _ref.theme,
|
||||
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: _react.PropTypes.bool,
|
||||
children: _react.PropTypes.any,
|
||||
className: _react.PropTypes.string,
|
||||
onOverlayClick: _react.PropTypes.func,
|
||||
permanentAt: _react.PropTypes.oneOf(['sm', 'smTablet', 'md', 'lg', 'lgTablet', 'xl', 'xxl', 'xxxl']),
|
||||
pinned: _react.PropTypes.bool,
|
||||
scrollY: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
active: _react.PropTypes.string,
|
||||
drawerContent: _react.PropTypes.string,
|
||||
lgPermanent: _react.PropTypes.string,
|
||||
mdPermanent: _react.PropTypes.string,
|
||||
navDrawer: _react.PropTypes.string,
|
||||
pinned: _react.PropTypes.string,
|
||||
scrim: _react.PropTypes.string,
|
||||
scrollY: _react.PropTypes.string,
|
||||
smPermanent: _react.PropTypes.string,
|
||||
wide: _react.PropTypes.string,
|
||||
xlPermanent: _react.PropTypes.string,
|
||||
xxlPermanent: _react.PropTypes.string,
|
||||
xxxlPermanent: _react.PropTypes.string
|
||||
}),
|
||||
width: _react.PropTypes.oneOf(['normal', 'wide'])
|
||||
};
|
||||
|
||||
NavDrawer.defaultProps = {
|
||||
active: false,
|
||||
className: '',
|
||||
scrollY: false,
|
||||
width: 'normal'
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(NavDrawer);
|
||||
exports.NavDrawer = NavDrawer;
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
'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,
|
||||
className = _ref.className,
|
||||
onScroll = _ref.onScroll,
|
||||
scrollY = _ref.scrollY,
|
||||
theme = _ref.theme;
|
||||
|
||||
var _className = (0, _classnames3.default)(theme.panel, _defineProperty({}, theme.scrollY, scrollY), className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'panel', onScroll: onScroll, className: _className },
|
||||
children
|
||||
);
|
||||
};
|
||||
|
||||
Panel.propTypes = {
|
||||
children: _react.PropTypes.any,
|
||||
className: _react.PropTypes.string,
|
||||
onScroll: _react.PropTypes.func,
|
||||
scrollY: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
panel: _react.PropTypes.string,
|
||||
scrollY: _react.PropTypes.string
|
||||
})
|
||||
};
|
||||
|
||||
Panel.defaultProps = {
|
||||
className: '',
|
||||
scrollY: false
|
||||
};
|
||||
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LAYOUT)(Panel);
|
||||
exports.Panel = Panel;
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
'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,
|
||||
className = _ref.className,
|
||||
pinned = _ref.pinned,
|
||||
scrollY = _ref.scrollY,
|
||||
theme = _ref.theme,
|
||||
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: _react.PropTypes.any,
|
||||
className: _react.PropTypes.string,
|
||||
pinned: _react.PropTypes.bool,
|
||||
scrollY: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
pinned: _react.PropTypes.string,
|
||||
scrollY: _react.PropTypes.string,
|
||||
sidebar: _react.PropTypes.string,
|
||||
sidebarContent: _react.PropTypes.string
|
||||
}),
|
||||
width: _react.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;
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
$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;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue